JavaScript实现走马灯效果的关键是设置外容器的scrollTop或者其它相应的属性。
<!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=utf-8" />
<title>走马灯</title>
<style type="text/css">
*{
padding:0;
margin:0;
border:none;
}
div{
width:200px;
height:20px;
overflow:hidden;
margin:auto;
}
li{
margin-left:2em;
height:20px;
line-height:20px;
}
</style>
</head>
<body>
<div id="news">
<ul>
<li>xxxxxxxxxxxxxxxxxxxxxxx1</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx2</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx3</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx4</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx5</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx6</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx7</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx1</li>
</ul>
</div>
<script type="text/javascript">
var obj = document.getElementById("news");
obj.scrollTop = 0;
var num = 0;
var interval = new Array();
function roll(){
obj.scrollTop++;
if(/^\d+$/.test(obj.scrollTop / 20)){
clearInterval(interval[0]);
num ++;
if(num >= 7){
num = 0;
obj.scrollTop = 0;
}
}
}
function startRoll(){
interval[0] = setInterval("roll()",20);
}
interval[1] = setInterval("startRoll()",3000);
</script>
</body>
</html>
分享到：
相关推荐
Javascript跑马灯效果浅析.pdf
使用JavaScript实现的跑马灯效果。跑马灯图片使用自动添加img标签实现，可以添加10张图片，只需修改图片数组的内容，在数组中添加相应图片名称即可。
做项目时非常经典的跑马灯效果,做个记号下次再用!
javascript实现网页状态栏跑马灯效果特效，一个小的积累，不错
div对象（id名称或dom对象都可以，已经在内部作了处理） 宽度（可选） 高度（可选） 内容（由数组实现，数组里存放任何html内容都可以，示例里存放的是img标签，也就是说，实现了几张图片的跑马灯效果）。
Javascript实现跑马灯效果的简洁实例_.docx
jQuery.Marquee 跑马灯效果
js仿marquee标签的走马灯效果
JavaScript实现的 动态从文件夹中取得图片 鼠标放上实现暂停和左右滚动效果
走马灯效果的链接提示，大家的需求不一样，因此可能有朋友会喜欢这样的链接提示，用到的话，再好好美化一下，其实效果还是不错的。
Vue实现跑马灯样式文字横向滚动 ... 代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="scroll
javascript ,状态栏跑马灯 运行IE可看到IE状态栏跑马灯效果， 用记事本打开，可看到源代码
vue实现简单的跑马灯效果 本文实例为大家分享了vue实现简单跑马灯效果的具体代码，供大家参考，具体内容如下 效果图 代码 html <div id="app"> 开启</button> 停止</button> <p>{{msg}}</p> </div>...
下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文实例为大家分享了Vue实现跑马灯简单效果的具体代码，供大家参考，具体内容如下 1、跑马灯效果 说明：单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动 2、完整代码 (注意：代码中需要引入vue.js...
网上找到很多文字滚动，但都良莠不齐，基本都是左右滚动的，没有上下滚动。所以来分享一波 利用scortop实现文字移动，判断如果第一个元素的高度，如果小于等于了scrolltop（翻滚了多少高度）就把它删除并且添加到...
本文实例为大家分享了js实现文字跑马灯效果的具体代码，供大家参考，具体内容如下 思路： 1.判断文字的长度和容器的长度，如果文字长度大于容器长度，则开始滚动，否则不滚动。 2.获取滚动条到元素左边的距离,递归...
30格的转盘抽奖，可抽三个，每抽一次会标识已抽过的，里面的动画效果由javascript和css3动画组成。
javascript 图片无缝隙滚动效果