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

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

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

<!DOCTYPE HTML>
<html lang="en-US">
<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 class="content">
      <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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

(0)

相关推荐

  • js实现可控制左右方向的无缝滚动效果

    本文实例为大家分享了无缝滚动效果JavaScript代码实现,供大家参考,具体内容如下] 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>zzzz</title> <style> *{ margin: 0; padding:0; } body{ width: 1000px; margin: 100px a

  • javascript实现文字无缝滚动

    效果如图: html:( 一个div 包裹两个ul ) <div style="position: absolute; left: 500px; top: 200px; background-color: white; height: 140px; width: 400px; border: solid; 1px; overflow: hidden;" id="box"> <ul id="ul1"> <li>&

  • javascript实现的左右无缝滚动效果

    本文实例讲述了javascript实现的左右无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍过图片左右滚动,不过图片是间歇性的一张一张滚动,今天介绍的是几张图片一起进行无缝滚动,这是一个常用的 js 效果. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动--左右</title> &

  • 简单实现js无缝滚动效果

    本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vert

  • JS与HTML结合使用marquee标签实现无缝滚动效果代码

    最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动.下面小编把实现代码分享到我们平台,需要的朋友可以参考下,有bug欢迎提出,共同学习进步. 具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns=&

  • 原生js实现水平方向无缝滚动

    水平方向无缝滚动 滚动支持图片,文字 原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动.兼容各大浏览器. HTML代码 <div id="demo"> <div id="demoin"> <div id="demo1"> <a href="">测试

  • js实现无缝滚动图

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type = "text/css"> ul, li { padding: 0; margin: 0; } li { list-style: none; } .box { width: 800px; height: 450px;

  • Javascript 实现图片无缝滚动

    效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 复制代码 代码如下: <style type="text/css">             * {                 margin: 0;                 padding: 0;             }             #div1 {                 overflow: hidden;                 width: 71

  • js向上无缝滚动,网站公告效果 具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv=&q

  • javascript实现平滑无缝滚动

    本文我们实现纯JS方式的滚动广告效果,供大家参考,具体内容如下 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left

随机推荐