基于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>

效果：

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

赞 (0)

相关推荐

  • js实现随屏幕滚动的带缓冲效果的右下角广告代码

    js实现随屏幕滚动的带缓冲效果的右下角广告代码

    本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码.分享给大家供大家参考.具体如下: 一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边 默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-

  • js 获取屏幕各种宽高的方法(浏览器兼容)

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网

  • 探讨Android 的屏幕滚动操作不如 iPhone 流畅顺滑的原因

    其实我觉得最主要还是开发者对于应用的优化不够,太多的Overdraw和Layout方面的问题,Android开发者本身为了适配屏幕分辨率和解决其他一些兼容性问题已经耗费很多精力了,很少有开发者会花很多精力去做细致的性能优化,有的甚至连优化的方向都不知道.现在的官方微博客户端要我看在Overdraw方面还是很严重,然后在异步加载图片的时候帧率也不够稳定,算不上流畅.再则由于Android平台本身机能没有强大到优化烂的应用也能跑的非常流畅暴露了优化不够的事实,特别是手机厂商的定制ROM相比原生系统都

  • 基于jquery的跟随屏幕滚动代码

    基于jquery的跟随屏幕滚动代码

    那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. 复制代码 代码如下: var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#archive').offset().top; var $archiveOffestLeft = $('

  • 基于JavaScript实现屏幕滚动效果

    基于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%; hei

  • JS实现双击屏幕滚动效果代码

    JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码.分享给大家供大家参考,具体如下: 这里演示双击滚屏效果代码的实现方法,不知道有觉得有用处的没,现在网上还有很多还在用这个特效的呢,代码分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-db-click-src-scroll-style-codes/ 具体代码如下: <html> <SCRIPT language=JavaScript> var currentpos,ti

  • JS和jquery获取各种屏幕的宽度和高度的代码

    Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高

  • jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

    复制代码 代码如下: <!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> <title>jquery.tex

  • jquery跟随屏幕滚动效果的实现代码

    jquery跟随屏幕滚动效果的实现代码

    我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#arc

  • Js实现双击鼠标自动滚动屏幕的示例代码

    如下所示: 复制代码 代码如下: <html><head> <script language="javascript" type="text/javascript">//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){  timer=setInterval("scrollwindow()",30);}function sc(){  clearInter

随机推荐