您的位置:首页 > Web前端 > JavaScript

基于javascript实现文字无缝滚动效果

2016-03-22 00:00 1036 查看
本文实例为大家分享了javascript实现文字无缝滚动的全部代码,供大家参考,具体内容如下

效果图:



实现代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
.div{margin:100px auto 0;width:350px;height:168px; background:#fff;border:5px solid #ccc; border-radius:5px; overflow:hidden;padding:5px; cursor: pointer;}
.div ul li{list-style:none;height:24px; line-height: 24px; text-overflow:ellipsis; font-size: 12px; white-space:nowrap; overflow: hidden;}
</style>
</head>
<body>
<div class="div" id="div">
<ul>
<li>1、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德萨</li>
<li>2、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德</li>
<li>3、分看见地声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
<li>4、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
<li>5、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
<li>6、分看见地上放声大哭了范声大哭了上放声大哭了</li>
<li>7、分看见地上放声大哭了上放声大哭了上放声大哭了范上放声大哭了上放声大哭了德</li>
<li>8、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
</ul>
</div>
<script type="text/javascript">

var area = document.getElementById('div');
var iliHeight = 24;//单行滚动的高度
var speed = 50;//滚动的速度
var time;
var delay= 1000;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一样的内容
function startScroll()
{
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}

function scrollUp()
{
if(area.scrollTop % iliHeight==0)
{
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)

</script>
</body>
</html>


以上就是本文的全部内容,希望对大家javascript程序设计有所帮助。

您可能感兴趣的文章:

彻底搞懂JS无缝滚动代码
js 实现无缝滚动 兼容IE和FF
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
jcarousellite.js 基于Jquery的图片无缝滚动插件
JS左右无缝滚动(一般方法+面向对象方法)
JS图片无缝滚动(简单利于使用)
javascript实现可改变滚动方向的无缝滚动实例
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
js向上无缝滚动,网站公告效果 具体代码
可自定义速度的js图片无缝滚动示例分享
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript 无缝滚动