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

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

Javascript: JavaScript 继承详解（四）; 兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现; js 实现无缝滚动兼容IE和FF; js 对象是否存在判断; 优化 JavaScript 代码的方法小结; 表单元素事件 (Form Element Events); js 动态创建 html元素; prototype 学习笔记整理; JavaScript 创建对象; javascript 全角转换实现代码; DOM 基本方法; 用showModalDialog弹出页面后，提交表单总是弹出一个新窗口; javascript 动态创建 Option选项; javascript 7行代码画出一个围棋棋盘; 比较简单的异步加载JS文件的代码; javascript 层隐藏和显示的代码; 自定义滚动条3.0; javascript iframe内的函数调用实现方法; Prototype Class对象学习; Prototype RegExp对象学习

No. « ‹ 146 147 148 149 › »

技术文章搜索

关键字

Javascript 仿歌词智能滚动代码

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

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