当前位置：首页 > 资讯 > 技术文档

基于JavaScript实现屏幕滚动效果

时间：2022-03-08 23:01 编辑：来源：阅读：
扫一扫，手机访问

摘要：基于JavaScript实现屏幕滚动效果

屏幕滚动效果：

<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  ul,ol {
   list-style-type: none;
  }
  * {margin:0;padding:0;}
  html,body {
   width: 100%;
   height: 100%;
  }
  #ul {
   width: 100%;
   height: 100%;
  }
  ul li{
   width: 100%;
   height: 100%;
  }
  #ol {
   position: fixed;
   top:0;
   left:50px;
  }
  #ol li {
   width: 50px;
   height: 50px;
   border: 1px solid #000;
  }
 </style>
 <script src="my.js" type="text/javascript"></script>
 <script>
  window.onload = function() {
   var ulBox = $("ul");
   var ulBoxLi = ulBox.children;
   var olBox = $("ol");
   var olBoxLi = olBox.children;
   var bgColor = ["pink","purple","orange","blue","green"];
   var leader = 0,target = 0,timer = null;
   for(var i= 0; i<ulBoxLi.length; i++)
   {
    ulBoxLi[i].style.backgroundColor = bgColor[i];
    olBoxLi[i].style.backgroundColor = bgColor[i];
    olBoxLi[i].index = i; // 记录当前的索引号
    olBoxLi[i].onclick = function() {
     clearInterval(timer);
     target = ulBoxLi[this.index].offsetTop; // 核心语句
     timer = setInterval(function() {
      leader = leader + (target - leader ) /10;
      window.scrollTo(0,leader); // 屏幕滑动
      //pic.style.left = leader + 'px';
     },30)
    }
   }
  }
 </script>
</head>
<body>
<ul id="ul">
 <li>首页</li>
 <li>关注</li>
 <li>动态</li>
 <li>风格</li>
 <li>作品</li>
</ul>
<ol id="ol">
 <li>首页</li>
 <li>关注</li>
 <li>动态</li>
 <li>风格</li>
 <li>作品</li>
</ol>
</body>
</html>

效果： [img]http://files.jb51.net/file_images/article/201701/2017118113019534.jpg?2017018113043[/img] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Bootstrap CSS布局之图像
下一篇：javascript GUID生成器实现代码

资讯排行榜
更多>>