您的位置：首页 > 其它

信息滚动效果制作

2017-07-31 15:41 190 查看

一、效果一（不停滚动）

列表会在框内不停的滚动。而且不会出现空白的部分(意思就是说假设有8条内容，8之后就会又出现1。)

为了要实现这种无缝连接的效果，可以想象当第一个内容块就要滚动完的时候，如果有一模一样的内容块接在这个上一个内容块的后面继续滚动，看起来就像是同一个内容块自己在来回滚动。

所以我们就可以为内容块克隆一个样的内容块。但是滚动是一直滚动下去的，我们不可能一直克隆下去。所以，当第一块内容的高度正好滚出容器时，即下图的情况，再从头开始滚动，即把高度scrollTop重新设置为0

HTML &CSS部分

<style>
*{
margin:0;
padding:0;
}
#mask{
width:500px;
border:1px solid rgba(174, 59, 29, 0.76);
margin:0 auto;
margin-top: 100px;
/*overflow: hidden;*/

}
#headbox{
height:50px;
line-height: 50px;
background-color: rgba(174, 59, 29, 0.76);
color: #FFFFFF;
text-align: center;
}
ul{
list-style: none;
margin-left: 30px;
}
ul li{
width: 440px;
line-height: 40px;
border-bottom: 1px dotted grey;
}
#bodybox{
height:250px;
overflow: hidden;
/*因为内容实在bodybox里面的，所以要为bodybox设置overflow属性*/
}

</style>
</head>
<body>

<div id="mask">
<div id="headbox">
无缝滚动效果
</div>
<div id="bodybox">
<ul id="con1">
<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="con2">
</ul>
</div>

</div>

JavaScript部分

<script type="text/javascript">
var area= document.getElementById('bodybox');
area.scrollTop =0;
var time=50;

//克隆元素
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
con2.innerHTML = con1.innerHTML;

//滚动的实现
function scrollUp(){
if(area.scrollTop>=con1.scrollHeight)
{
area.scrollTop=0;

}
else {
area.scrollTop++;
}

}

//初始状态
var myScroll = setInterval("scrollUp()",time);
//以下为鼠标悬停的事件
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",time);
}
</script>

[title2]二、效果二（每条停止几秒后继续滚动）[/title2]

HTML&CSS部分

和上面的一样.略~~~

JavaScript部分

<script type="text/javascript">

var area= document.getElementById("bodybox");
area.innerHTML += area.innerHTML;
var time=50;
area.scrollTop=0;
var myscroll;

//scrollUp函数主要是负责每次scrollTop++的判断。
function scrollUp() {

if(area.scrollTop % 40 == 0)
//40是每一行的高度，可以用一个变量（iHeight）存储起来
{
clearInterval(myscroll);
//为了停止，就要清除滚动的效果
setTimeout("startscroll()",2000);
//延迟了2秒之后继续滚动
}
else if(area.scrollTop == area.scrollHeight/2) {
area.scrollTop = 0;
area.scrollTop++;
//这里是为了实现能无缝地滚动
}
else
{
area.scrollTop++;

}
}
//setInterval()函数主要是负责循环调用，判断由scrollUp负责
function startscroll(){
area.scrollTop++;
myscroll = setInterval("scrollUp()",50);
}

setTimeout("startscroll()",2000);//初始

</script>

代码链接：GitHub

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航