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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：869 次日期：2016-07-19 13:59:57

温馨提示：小编为您整理了“基于javascript实现文字无缝滚动效果”,方便广大网友查阅！

本文实例为大家分享了javascript实现文字无缝滚动的全部代码，供大家参考，具体内容如下

效果图：

实现代码：

<!DOCTYPE html>

<html>

<head>

<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>

<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>

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程序设计有所帮助。

上一篇：javascript的几种继承方法介绍

下一篇：ajax在兼容模式下失效的快速解决方法

手机网站地址：基于javascript实现文字无缝滚动效果

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！