基于JavaScript实现屏幕滚动效果


Posted in Javascript onJanuary 18, 2017

屏幕滚动效果:

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

效果:

基于JavaScript实现屏幕滚动效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
jquery 常用操作方法
Jan 28 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 #Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 #Javascript
原生Javascript插件开发实践
Jan 18 #Javascript
js实现炫酷的左右轮播图
Jan 18 #Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 #Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
js活用事件触发对象动作
2008/08/10 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
学习Vue组件实例
2018/04/28 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
单位创先争优活动方案
2014/01/26 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
维稳工作情况汇报
2014/10/27 职场文书
捐助倡议书
2015/01/19 职场文书
老公保证书怎么写
2015/02/26 职场文书
煤矿安全保证书
2015/02/27 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫