js无缝滚动代码大全

时间：2020-02-20加入收藏

js无缝滚动代码大全
今天遇到了无缝滚动特效，网上虽然很多，但是合适的很少，今天记录下自己用的：

<!DOCTYPE HTML>
<html>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

<head>
<style type="text/css">
ul{
/*不要margin否则滚动会有缝隙*/
margin:0;
}
div {
/*overflow hidden·否则无法盖住下面的内容*/
overflow: hidden;
width: 75px;
height: 30px;
margin-left: 29%;
margin-top: 10%;
background: aqua;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
</head>
<body>
<div id="ca">
<ul id="c1">
<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>
<ul id="c2"></ul>
</div>
</body>
<script language="javascript" type="text/javascript">
var c1=document.getElementById("c1");
var c2=document.getElementById("c2");
var ca=document.getElementById("ca");
/*将第一个ul的值赋值给第二个当第一个头部消失时由第二个来显示*/
c2.innerHTML=c1.innerHTML;
var cas=null;
window.onload=function(){
st();
}
cas=setInterval('st()',50);
function st(){
//clearInterval(cas);
/*如果滚动长度大于第一个ul的高度就需要将第一个ul回到原处 */
if(ca.scrollTop>=c1.offsetHeight){
ca.scrollTop=0;
}else{
ca.scrollTop++;
}/*鼠标移入就清除清除定时器*/
ca.onmouseover=function() {
clearInterval(cas);
}
ca.onmouseout=function() {
cas=setInterval('st()',50);
}

}
</script>
</html>

打赏

上一篇
php实现分页功能下一篇
css超出隐藏省略css多行文本超出省略号

TGA： 技巧

分享到：

js无缝滚动代码大全

相关阅读

栏目分类

排行榜

专题推荐