基于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 相关文章推荐
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
jQuery实现增删改查
Dec 22 jQuery
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
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
javascript正则表达式总结
2016/02/29 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
Linux的主要特性
2014/10/06 面试题
教师自我反思材料
2014/02/14 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
学历公证委托书
2014/04/09 职场文书
旅游节目策划方案
2014/05/26 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
gojs实现蚂蚁线动画效果
2022/02/18 Javascript