今天小滑稽为大家带来的是一种很常用的特效就是无缝滚动
无缝滚动这东西 电商网站或者信息类网站用的应该是很多的,当然了 用jquery可以 用js都可以实现这种效果,今天咱们说的就是用纯js实现
首先还是打开webstorm新建个html页面
1、首先看布局,应该没什么大的问题
<div id=”mooc”>
<h3 id=”moocTitle”>新闻列表</h3>
<div id=”moocBox”>
<ul id=”con1″>
<li>1.醉后不知天在水<b>2016-4-3</b></li>
<li>2.满船清梦压星河<b>2016-4-3</b></li>
<li>3.只愿君心似我心<b>2016-4-3</b></li>
<li>4.定不负相思意。<b>2016-4-3</b></li>
<li>5.只缘感君一回顾<b>2016-4-3</b></li>
<li>6.使我思君朝与暮<b>2016-4-3</b></li>
<li>7.直道相思了无益<b>2016-4-3</b></li>
<li>8.未妨惆怅是清狂<b>2016-4-3</b></li>
<li>9.山长水阔知何处<b>2016-4-3</b></li>
</ul>
<ul id=”con2″></ul>
</div>
</div>
htm布局很清晰一个标题下面一组ul用来放需要滚动的信息,滚动嘛信息肯定要长一些
2、接下来是css样式,里面有个关键的就是要固定高度,显示5-6条足够了ul外层的盒子一样要给一个
overflow: hidden 用来把多余的部分隐藏掉
<style>
*{margin: 0;padding: 0}
ul,li{list-style: none;}
#mooc{width: 400px;border-radius: 5px;margin: 50px auto;border: 2px solid #c0c0c0;text-align: center;}
#moocTitle{padding: 20px;background: red;color: white;border-radius: 5px;}
#moocBox{height: 142px;overflow: hidden}
#con1,#con2{width: 300px;margin: 0 auto;height: 210px;}
#con1 li,#con2 li{margin-top: 5px; }
#con1 b,#con2 b{float: right;margin-right: 10px;}
</style>
很简单的css代码
3、开始写脚本部分
第一步很简单 把需要的元素获取到
window.onload= function () {
var ar=document.getElementById(‘moocBox’);
var ar1=document.getElementById(‘con1’);
var ar2=document.getElementById(‘con2’);
}
需要知道scrollTop是干嘛的 这个scrollTop意思就是滚动条距离文档顶部的距离。
所以只要让这个scrollTop不停的+1就好了 这时候就需要个定时器了
auto();
function auto(){
var time=50;
var timer=setInterval(function () {
ar.scrollTop++;
},50)
按照思路我们可以这样写 可是等滚到最上面就没了,所以还需要知道innerHTML这个东西
在个滚动完以后 在重新把ar1的值赋给ar2
ar2.innerHTML=ar1.innerHTML;
这时候 滚动到下面 又可以继续滚动了,可是ar2如果滚动完了 还要给ar3？那可就麻烦
所以现在判断下
offsetHeight 意思是可见的高度,那么现在就需要这个了
再加上鼠标移入暂停事件 就可以了
全部代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
*{margin: 0;padding: 0}
ul,li{list-style: none;}
#mooc{width: 400px;border-radius: 5px;margin: 50px auto;border: 2px solid #c0c0c0;text-align: center;}
#moocTitle{padding: 20px;background: red;color: white;border-radius: 5px;}
#moocBox{height: 142px;overflow: hidden}
#con1,#con2{width: 300px;margin: 0 auto;height: 210px;}
#con1 li,#con2 li{margin-top: 5px; }
#con1 b,#con2 b{float: right;margin-right: 10px;}
</style>
</head>
<body>
<div id=”mooc”>
<h3 id=”moocTitle”>新闻列表</h3>
<div id=”moocBox”>
<ul id=”con1″>
<li>1.醉后不知天在水<b>2016-4-3</b></li>
<li>2.满船清梦压星河<b>2016-4-3</b></li>
<li>3.只愿君心似我心<b>2016-4-3</b></li>
<li>4.定不负相思意。<b>2016-4-3</b></li>
<li>5.只缘感君一回顾<b>2016-4-3</b></li>
<li>6.使我思君朝与暮<b>2016-4-3</b></li>
<li>7.直道相思了无益<b>2016-4-3</b></li>
<li>8.未妨惆怅是清狂<b>2016-4-3</b></li>
<li>9.山长水阔知何处<b>2016-4-3</b></li>
</ul>
<ul id=”con2″></ul>
</div>
</div>
<script>
window.onload= function () {
var ar=document.getElementById(‘moocBox’);
var ar1=document.getElementById(‘con1’);
var ar2=document.getElementById(‘con2’);
auto();
var timer;
function auto(){
var time=50;
var timer=setInterval(function () {
ar2.innerHTML=ar1.innerHTML;
if(ar.scrollTop>ar1.offsetHeight){
ar.scrollTop=0;
}else{
ar.scrollTop++;
}
},time)
}
ar.onmouseover= function () {
clearInterval(timer);
}
ar.onmouseout= function () {
auto();
}
}
</script>
</body>
</html>
明天有空说下 左右滚动的原理
喜欢的小伙伴关注下 每天更新原创文章~
未经允许禁止转载
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/10378.html
