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

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

Javascript: JavaScript如何重构嵌套循环和递归; JS应用在Firebug中的扩展架构模式; 提升JS性能：将递归转换为迭代; IE7浏览器下缩放图片失真问题; JavaScript对DOM进行操作的指导性原则; JavaScript有趣实例:胸罩罩杯尺寸计算器; Firefox的Firebug扩展：FireScope; Mozilla的JavaScript引擎__noSuchMethod__()方法; JavaScript+CSS制作的网站导航菜单; javascript的私有成员(private); Javascript绘制分析曲线图; ie6使用js支持hover伪类; 收集的25个下拉网页菜单特效Javascript脚本; Javascript框架的自定义事件; 总结Javascript调用函数的方法; JS教程:call、apply、callee用法; JS教程:数组类型检测和集合检测; 兼容FF的设为首页与收藏网站的JS代码; Javascript教程:PopUp对象; JS读写Cookie以及设置过期时间

No. « ‹ 171 172 173 174 › »

技术文章搜索

关键字

Javascript 仿歌词智能滚动代码

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

收藏到网摘: 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