1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         ul, ol {
  13.             list-style: none;
  14.         }
  15.  
  16.         html, body, ul, ul li {
  17.             width: 100%;
  18.             height: 100%;
  19.         }
  20.  
  21.         ol {
  22.             position: fixed;
  23.             top: 50px;
  24.             left: 50px;
  25.         }
  26.  
  27.         ol li {
  28.             width: 50px;
  29.             height: 50px;
  30.             border: 1px solid #000;
  31.             text-align: center;
  32.             line-height: 50px;
  33.             cursor: pointer;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38. <ul>
  39.     <li>1</li>
  40.     <li>2</li>
  41.     <li>3</li>
  42.     <li>4</li>
  43.     <li>5</li>
  44. </ul>
  45. <ol>
  46.     <li>1</li>
  47.     <li>2</li>
  48.     <li>3</li>
  49.     <li>4</li>
  50.     <li>5</li>
  51. </ol>
  52. <!--ol>li{$}*5-->
  53. <script>
  54.     var timer = null;
  55.     //var leader = 0;
  56.     //找人
  57.     var ol = document.getElementsByTagName("ol")[0];
  58.     var olLis = ol.children;
  59.     var ul = document.getElementsByTagName("ul")[0];
  60.     var ulLis = ul.children;
  61.  
  62.     var arr = ["red", "orange", "yellow", "green", "blue"];
  63.     for (var i = 0; i < arr.length; i++) {
  64.         olLis[i].style.backgroundColor = arr[i];
  65.         ulLis[i].style.backgroundColor = arr[i];
  66.     }
  67.  
  68.     /*window.onscroll = function () {
  69.         leader = window.pageYOffset;//当前页面被卷去的头部
  70.     };*/
  71.  
  72.     //给所有的olLis注册点击事件
  73.     for (var j = 0; j < olLis.length; j++) {
  74.         olLis[j].index = j;
  75.         olLis[j].onclick = function () {
  76.             //让窗体滚动到指定位置
  77.             //就是要滚动到 要去的ul 的 offsetTop的值
  78.             //当前点击的是ol中的哪个li 就去到ul中的那个li
  79.             var target = ulLis[this.index].offsetTop;
  80.             //window.scrollTo(0, target);
  81.             //之前封装的缓动框架只能设置属性 而我们这里要的是一个渐渐变化的值
  82.             clearInterval(timer);
  83.             timer = setInterval(function () {
  84.                 //step = (target - leader) / 10
  85.                 //leader = leader + step
  86.                 var leader = window.pageYOffset;//当前页面被卷去的头部
  87.                 var step = (target - leader) / 10;
  88.                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
  89.                 leader = leader + step;
  90.                 //console.log(leader);
  91.                 window.scrollTo(0, leader);
  92.                 if (leader === target) {
  93.                     clearInterval(timer);
  94.                 }
  95.             }, 20);
  96.         };
  97.     }
  98. </script>
  99. </body>
  100. </html>

javascript中全屏滑动效果实现的更多相关文章

  1. iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果

    8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...

  2. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  3. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  4. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  5. UINavigationController实现全屏滑动返回功能

    说明: UINavigationController默认在push出的控制器中都有边沿滑动返回功能,但是只能从屏幕左边滑才能返回,若从屏幕中间画并没有效果.下面实现全屏滑动功能. 探究: 系统默认能够 ...

  6. Android 高大上的侧滑菜单DrawerLayout，解决了不能全屏滑动的问题

    DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图:   注意左上角那个图标,有木有很好玩,哈哈. ...

  7. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...

  8. iOS - 全屏滑动

    取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...

  9. 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

随机推荐

  1. 2017/01/07 学习笔记　jar包，maven

    ① 关于tar,jar,war文件 tar是通用的另一种打包格式,为了部署到服务器时方便. jar是java app server识别的java部署格式,其实是Zip文件,只是内部的文件有规范. wa ...

  2. 易观OLAP算法大赛结果揭晓，开源组黑马放大招！

    100+天激烈赛程,40+国内顶级技术豪门对决,历经研发内部测试.正式环境测试和易观数据正式环境跑benchmark三大阶段.10月28日,易观OLAP算法大赛优胜名单出炉! 40+技术门派比武 易观 ...

  3. 通过nvm 切换 npm 版本

    通过 nvm-windows 更新 npm 1.先安装 nvm-windows .成功后可在命令窗口 输入nvm 查看到 nvm的版本号. 2..在命令窗口输入 nvm list,查看当前使用的 no ...

  4. apicloud开发方法。

    1.前端布局 window frame 子窗口 franmegroup  子窗口组. 一个页面比如有一个固定的顶部,然后中间区域是商品或者是什么内容,那么这个整体就是一个window,那么中间的就是i ...

  5. 三维地图中的A*寻路

    跟二维地图原理一样,只不过搜索方向多了,二维只搜8个方向,而三维要搜26个方向. 不懂的看我以前写的文章,这里直接贴代码: #include <iostream> #include < ...

  6. POI操作Excel的三种Workbook的发展和区别

    POI的一些使用方法: 创建流程:(上级为下级的载体) 1.创建Workbook(工作薄): 2.创建Sheet(表单,可以创建多个): 3.创建Row(行): 4.创建Cell(单元格) 接下来分别 ...

  7. POJ 2377 Bad Cowtractors（ 最小生成树转化 ）

    链接:传送门 题意:给 n 个点 , m 个关系,求这些关系的最大生成树,如果无法形成树,则输出 -1 思路:输入时将边权转化为负值就可以将此问题转化为最小生成树的问题了 /************* ...

  8. [luogu2272 ZJOI2007] 最大半连通子图 (tarjan缩点 拓扑排序 dp)

    传送门 题目描述 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v的有向路径或者从v到u的有向 ...

  9. Problem 10

    Problem 10 # Problem_10.py """ The sum of the primes below 10 is 2 + 3 + 5 + 7 = 17. ...

  10. Loaded APR based Apache Tomcat Native library 1.1.24 using APR version 1.4.6.

    Loaded APR based Apache Tomcat Native library 1.1.24 using APR version 1.4.6. 我复制的几个地方: MySql C:\WIN ...