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

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

Javascript: 经常用到的JavasScript事件的翻译; Javascript下的keyCode键码值表; 用javascript动态调整iframe高度的代码; javascript应用：Iframe自适应其加载的内容高度; javascript 控制弹出窗口; 用javascript父窗口控制只弹出一个子窗口; 给moz-firefox下添加IE方法和属性; FireFox中textNode分片的问题; 对google个性主页的拖拽效果的js的完整注释[转]; 身份证号码前六位所代表的省,市,区, 以及地区编码下载; 一个友好的.改善的 Object.prototype.toString的实现; 如何写一个通用的JavaScript效果库！(1/2); 如何写一个通用的JavaScript效果库！(2/2); 几个高效，简洁的字符处理函数; 无语，javascript居然支持中文(unicode)编程！; ie 处理 gif动画的onload 事件的一个 bug; 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别; firefox 和 ie 事件处理的细节,研究,再研究-----书写同时兼容ie和ff的事件处理代码; 深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法; JavaScript 中的replace方法说明

No. « ‹ 61 62 63 64 › »

技术文章搜索

关键字

Javascript 仿歌词智能滚动代码

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

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