Javascript 仿歌词智能滚动代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript 仿歌词智能滚动代码

Javascript: javascript实例教程(15) 日期函数; javascript实例教程(17) 使用字符串函数; javascript实例教程(18) 数组; javascript实例教程(19) 使用HoTMetal(1); javascript实例教程(19) 使用HoTMetal(2); javascript实例教程(19) 使用HoTMetal(3); javascript实例教程(19) 使用HoTMetal(4); javascript使图片加载进度实时显示; 代码前置时页面输出脚本的要注意的问题|; javascript网页中显示硬盘内容; JS实现仿新浪信息提示效果; Js 按照MVC模式制作自定义控件; 滑动展开/收缩广告代码实例效果; JS实现的滑动展开与折叠效果; 时钟广告跳转状态栏等JS代码; 一个以Javascript+xml的树型列表; target 属性怎么用 JS 来控制？; 一组常用的弹出窗口用法总结; 冒泡算法的三种JavaScript表示; 网页最简短的拖动对象代码实例演示

No. « ‹ 236 237 238 239 › »

技术文章搜索

关键字

Javascript 仿歌词智能滚动代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 127 ::

收藏到网摘: n/a

JS、CSS文字切换，定时交替，代码精简 javascript 表单中浏览文件的“浏览”按钮修改

为什么说它是智能滚动呢？因为如果我们在布局网页的时候，预留的滚动区域太小的话，有可能文字会有一部分看不到，本款代码可以智能判断区域大小，如果不够显示文字，那么它会控制文字做相应的左右滚动. 保证浏览者能看清楚文字，然后继续上下滚动。

<html>
<head>
<title>文本滚动</title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:98px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){
var o=document.getElementById('infozone');hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},8000);
}
function scrollup(o,d,c){
if(d==c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px';
hscroll(o);
}
else{
ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
o.firstChild.style.marginTop=-c+l+'px';
window.setTimeout(function(){scrollup(o,d,c-l)},50);
}
}
function hscroll(o){
var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
if(w1<=w2)return;
tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}
function hs(o,d,c,p){
c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>
<body>
<div id="infozone"><div>青花瓷（周杰伦）</div><div>一生有你（水木年华）</div><div>神话（孙楠、韩红）</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

JS、CSS文字切换，定时交替，代码精简 javascript 表单中浏览文件的“浏览”按钮修改

Javascript 仿歌词智能滚动代码

评论 (0) All