脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js屏幕滚动效果

基于JavaScript实现屏幕滚动效果

 更新时间：2017年01月18日 11:28:41   作者：秋天1014童话  
这篇文章主要为大家详细介绍了基于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>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS计算网页停留时间代码

    JS计算网页停留时间代码

    这篇文章主要介绍了JS计算网页停留时间的具体实现,需要的朋友可以参考下
    2014-04-04
  • JavaScript手风琴页面制作

    JavaScript手风琴页面制作

    这篇文章主要为大家详细介绍了JavaScript手风琴页面的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Bootstrap媒体对象的实现

    Bootstrap媒体对象的实现

    在web页面中，图片居左，内容居右排列，是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件。本文给大家介绍Bootstrap媒体对象的实现，感兴趣的朋友一起学习吧
    2016-05-05
  • js实现录音上传功能

    js实现录音上传功能

    这篇文章主要为大家详细介绍了js实现录音上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

    JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

    下面小编就为大家带来一篇JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • javascript 数组排序函数sort和reverse使用介绍

    javascript 数组排序函数sort和reverse使用介绍

    reverse方法将一个Array对象中的元素位置进行反转，sort方法返回一个元素已经进行了排序的 Array 对象，下面为大家介绍下
    2013-11-11
  • JS画布动态实现黑客帝国背景效果

    JS画布动态实现黑客帝国背景效果

    这篇文章主要为大家详细介绍了JS画布动态实现黑客帝国背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS继承实现方法及优缺点详解

    JS继承实现方法及优缺点详解

    这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • JS实现的视频弹幕效果示例

    JS实现的视频弹幕效果示例

    这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • JavaScript中的this使用详解

    JavaScript中的this使用详解

    this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。今天我们就来详细探讨下this的使用
    2016-07-07

最新评论