javascript实现的上下无缝滚动效果

来源：懂视网责编：小采时间：2020-11-27 20:26:25

javascript实现的上下无缝滚动效果

javascript实现的上下无缝滚动效果:本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下：前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 offsetTop 的值，并且不需要计算 ul 整体的宽度了。<!D

推荐度：

点击下载本文 文档为doc格式

导读javascript实现的上下无缝滚动效果:本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下：前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 offsetTop 的值，并且不需要计算 ul 整体的宽度了。<!D

本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下：

前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 offsetTop 的值，并且不需要计算 ul 整体的宽度了。

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>无缝滚动——上下</title>
 <style type="text/css">
 *{margin:0;padding:0;}
 li{list-style:none;}
 img{border:0;}
 #scroll{width:178px;margin:50px auto;position:relative;}
 .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
 .up{background:url(images/up.gif);}
 .down{background:url(images/down.gif);}
 .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
 .content ul{position:absolute;top:0;left:0;}
 .content li{height:110px;}
 </style>
</head>
<body>
 <div id="scroll">
 <a href="javascript:;" id="up" class="btn up"></a>
 <div>
 <ul>
 <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li>
 <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li>
 <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li>
 <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li>
 </ul>
 </div>
 <a class="btn down" href="javascript:;" id="down"></a>
 </div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
 var oDiv = document.getElementById('scroll');
 var btnUp = document.getElementById('up');
 var btnDown = document.getElementById('down');
 var oUl = oDiv.getElementsByTagName('ul')[0];
 var timer = null;
 var speed = -1;
 oUl.innerHTML += oUl.innerHTML;
 setTimeout(move,1500);
 btnUp.onclick = function(){
 clearInterval(timer);
 speed = -1;
 move();
 };
 btnDown.onclick = function(){
 clearInterval(timer);
 speed = 1;
 move();
 };
 oUl.onmouseover = function(){
 clearInterval(timer);
 };
 oUl.onmouseout = function(){
 move();
 };
 function move(){
 timer = setInterval(function(){
 oUl.style.top = oUl.offsetTop + speed + 'px';
 if(oUl.offsetTop <= - oUl.offsetHeight / 2){
 oUl.style.top = '0';
 }else if(oUl.offsetTop >= 0){
 oUl.style.top = - oUl.offsetHeight / 2 + 'px';
 };
 },30);
 };
};
</script>

如果要改变移动速度，修改 speed 的值即可，初始默认为向上移动，即速度为负数。

希望本文所述对大家JavaScript程序设计有所帮助。

更多javascript实现的上下无缝滚动效果相关文章请关注PHP中文网！

javascript实现的上下无缝滚动效果

推荐度：

点击下载本文 文档为doc格式

标签：实现 js 效果

热门焦点

javascript实现的上下无缝滚动效果

javascript实现的上下无缝滚动效果

javascript实现的上下无缝滚动效果

最新推荐

猜你喜欢

热门推荐