JS文字间隔性滚动代码/文字左右滚动
来源：互联网 发布：金钥匙软件 编辑：程序博客网 时间：2024/05/19 02:27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS文字间隔性滚动代码--------------文字左右滚动</title>
<meta name="keywords" content="文字滚动,间隔滚动,文字上翻,JS代码" />
<meta name="description" content="JS实现文字间隔性滚动效果，适合做公告。" />
<style type="text/css">
<!--
body{ font-size:12px;}
#shangfan{font-family: 新宋体, 宋体, 仿宋_GB2312;font-size: 12px; line-height:24px; height:48px; width:400px; border:solid 1px #ccc;overflow:hidden;}
#shangfan ul{margin: 0px 10px;padding: 0px;list-style-type: none;}
#shangfan ul li{/*文字超出本行，自动省略*/overflow:hidden;text-overflow:ellipsis;white-space: nowrap;margin:0;padding: 0px;}
-->
</style>
</head>
<body>
<div id="shangfan">
<div id="holder">
<ul>
<li>·文字逐行上翻代码，第一条</li>
<li>·文字逐行上翻代码，第二条</li>
<li>·文字逐行上翻代码，q</li>
<li>·文字逐行上翻代码，2</li>
<li>·文字逐行上翻代码，d</li>
<li>·文字逐行上翻代码，c</li>
<li>·文字逐行上翻代码，u</li>
<li>·文字逐行上翻代码，t</li>
<li>·文字逐行上翻代码，l</li>
<li>·文字逐行上翻代码，www</li>
</ul></div>
</div>
<script type="text/javascript">
function marquee(height,speed,delay){
var scrollT;
var pause = false;
var ScrollBox = document.getElementById("shangfan");
if(document.getElementById("holder").offsetHeight <= height) return;
var _tmp = ScrollBox.innerHTML.replace('holder', 'holder2')
ScrollBox.innerHTML += _tmp;
ScrollBox.onmouseover = function(){pause = true}
ScrollBox.onmouseout = function(){pause = false}
ScrollBox.scrollTop = 0;
function start(){
scrollT = setInterval(scrolling,speed);
if(!pause) ScrollBox.scrollTop += 2;
}
function scrolling(){
if(ScrollBox.scrollTop % height != 0){
ScrollBox.scrollTop += 2;
if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0;
}
else{
clearInterval(scrollT);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
marquee(48,30,3000);
</script>
说明：可修改marquee(24,30,3000);的数值来依次调整上翻的高度，速度，间隔时间。
滚动一行
marquee(24,30,3000); #shangfan{font-family: 新宋体, 宋体, 仿宋_GB2312;font-size: 12px; line-height:24px; height:24px; width:400px; border:solid 1px
#ccc;overflow:hidden;}
滚动二行或者三行，要修改二个地方，上面第一个24 还有 样式中的height:24px，这二个地方要改成相应的数值。
<p>
<p>
<p>
<p>
<p>
<div id="demo" style="overflow:hidden;height:20px;width:300px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/">魂牵梦萦佛挡杀佛魂牵梦萦栽植</a></td>
</tr>
</table></td>
<td id="demo2"></td>
</tr>
</table>
</div>
<script>
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
</script>
<p>
<p>
<p>
<p>
<div id="demoq" style="overflow:hidden;height:20px;width:300px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1q"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/">魂牵梦萦佛挡杀佛魂牵梦萦栽植</a> <a href="/">fsdafas f</a></td>
</tr>
</table></td>
<td id="demo2q"></td>
</tr>
</table>
</div>
<script>
var speed=30
var MyMarq=setInterval(Marqueeq,speed)
demo2q.innerHTML=demo1q.innerHTML
demoq.onmouseover=function() {clearInterval(MyMarq)}
demoq.onmouseout=function() {MyMarq=setInterval(Marqueeq,speed)}
function Marqueeq(){
if(demo2q.offsetWidth-demoq.scrollLeft<=0)
demoq.scrollLeft-=demo1q.offsetWidth
else{
demoq.scrollLeft++
}
}
</script>
</body>
</html>
- JS文字间隔性滚动代码/文字左右滚动
- 文字左右滚动代码
- js特效--》文字左右滚动
- js实现文字左右滚动
- 文字滚动JS代码
- JS无间隔文字滚动代码（三种效果）
- JS 有时间间隔的文字滚动
- 文字左右滚动标签
- 文字左右无缝滚动
- 文字左右循环滚动
- JS实现文字的左右滚动
- 求js文字滚动代码
- js文字上下滚动+左右滚动兼容FF/IE
- 滚动文字、滚动图片代码
- 文字定时滚动js
- 文字滚动JS
- js 滚动文字
- 文字滚动JS
- ubuntu里到tomcat日志问题
- 结交
- 合并单元格
- protobuf消息的自动派发
- Grinder TCPProxy
- JS文字间隔性滚动代码/文字左右滚动
- 区别区别更健康
- 开始Qt之旅
- .net网站更新遇到的一个问题
- 爱护自己的双眼――设置屏幕保护色
- c/c++支持可变参数的函数
- 分布式数据库概述
- Plain old data structure
- SIFT算法的几个问题
