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

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

Javascript: Dhtml:浏览大图时鼠标感应控制层滚动条的移动; 初试javascript ：贪吃蛇啊; 只让输入数字的输入框; 只能输入汉字的输入框; 在JS中定义数组删除方法; 在网页中使用realplayer播放rm文件; 用层实现为网页中的图添加水印的效果; 所见即所得编辑器 aynHTML 大全：（一）如何部署、嵌入、装载动态内容; JavaScript 收集的两个小代码！; JScript中正则表达函数的说明与应用; 网页上内容导出到word里; 关于开发在线网页编辑器按回车会输入<p>而不是<br>的解决方法; OOP In JS [JS脚本中的面向对象]; 一个很通用的javascript的下拉菜单; 将金额小写转化成汉字大写; VML Chart 控件; Js+Dhtml:WEB程序员简易开发工具包(预先体验版); Javascript实例教程(21) OLE Automation(4); javascript进行客户端数据的校验; JavaScript 小技巧(第三集)

No. « ‹ 8 9 10 11 › »

技术文章搜索

关键字

Javascript 仿歌词智能滚动代码

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

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