<!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title></title>

     <style>

         * { padding: ; margin: ; }

         body { background: #42509a; height:3000px;}

         ul { width: 800px; height: 500px; border: 1px solid #; background: #05090e; overflow: hidden; position: fixed;

             left:%; margin-left: -400px; top:%; margin-top: -250px;}

         li { position: absolute; list-style: none; }

         #pic1 { top: 210px; left: 550px; }

         #pic2 { top: 290px; left: 430px; }

         #pic3 { top: 215px; left: 220px; }

         #pic4 { top: 150px; left: 100px;  }

         #pic6 { top: 290px; left: 80px;  }

         #pic7 { top: 120px; left: 480px;  }

         #pic8 { top: 60px; left: 380px;  }

         #pic5 { top: -40px; left: -50px; width: 1422px; height: 1000px; background: url(../images/bg.jpg) no-repeat; }

         p{text-align:center; padding:10px ; color:#FFF;}

         p a{color:#FFF; text-decoration:none;}

         p a:hover{text-decoration:underline;}

     </style>

     <script>

         window.onload=window.onscroll=function(){

             var oUl=document.getElementById('ul_container');

             var aLi=oUl.children;

             var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

             for(var i=; i<aLi.length; i++){

                 aLi[i].style.marginTop=-scrollTop*aLi[i].style.zIndex/+'px';

             }

         };

     </script>

 </head>

 <body>

 <ul id="ul_container">

     <li id="pic1" style="z-index: 3;"><img src="data:images/1.jpg"  /></li>

     <li id="pic2" style="z-index: 4;"><img src="data:images/2.jpg"  /></li>

     <li id="pic3" style="z-index: 5;"><img src="data:images/3.jpg"  /></li>

     <li id="pic4" style="z-index: 4;"><img src="data:images/4.jpg"  /></li>

     <li id="pic6" style="z-index: 3;"><img src="data:images/5.jpg"  /></li>

     <li id="pic7" style="z-index: 2;"><img src="data:images/6.jpg"  /></li>

     <li id="pic8" style="z-index: 5;"><img src="data:images/7.jpg"  /></li>

     <li id="pic5" style="z-index: 1;"></li>

 </ul>

 </body>

 </html>

原生视觉差滚动---js+css;的更多相关文章

  1. web移动端浮层滚动阻止window窗体滚动JS/CSS处理

    CSS代码: .noscroll, .noscroll body { overflow: hidden; } .noscroll body { position: relative; } JS代码: ...

  2. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

  3. css实现视觉差的滚动

    之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果 ...

  4. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  5. js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...

  6. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  7. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  8. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  9. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

随机推荐

  1. Codeforces Round #376 (Div. 2) A B C 水 模拟 并查集

    A. Night at the Museum time limit per test 1 second memory limit per test 256 megabytes input standa ...

  2. Spring+SpringMVC+Mybatis+ehcache

    http://www.tuicool.com/articles/myeANv http://www.mamicode.com/info-detail-1151624.html

  3. Sql Server_笔记

    1.随机取出10条数据:select top 10 * from tablename order by newid()

  4. ros与下位机通信常用的c++ boost串口应用--22

    摘要: 原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 一.首先移植c++ boost 库: 1. 先去 Boost官网 下载最新的Boost版本, 我 ...

  5. UVa 1584 Circular Sequence --- 水题

    UVa 1584 题目大意:给定一个含有n个字母的环状字符串,可从任意位置开始按顺时针读取n个字母,输出其中字典序最小的结果 解题思路:先利用模运算实现一个判定给定一个环状的串以及两个首字母位置,比较 ...

  6. OSPF

    Ospf OSPF(开放最短路径优先协议)是一种无类内部网关协议(IGP):是一种链路状态路由选择协议: 入门: 可以把整个网络(一个自治系统AS)看成一个王国,这个王国可以分成几个 区(area), ...

  7. 在CentOS里使用MySQL Connector/C++

    操作系统版本:CentOS6 64位 1,安装boost库.因为MySQL Connector/C++使用了boost库,所以必须先安装boost库,我们才能使用MySQL Connector/C++ ...

  8. dictEntry **table;

    typedef struct dictht { dictEntry **table; PORT_ULONG size; PORT_ULONG sizemask; PORT_ULONG used;} d ...

  9. SQL 显示所有表所占存储空间

    USE master SELECT dbname = DB_NAME(), name, , , , /reserved END), , , [记录数] = rowcounts FROM ( SELEC ...

  10. 【转】ASP.NET的OnClientClick与OnClick事件【解决了“识别用户在对话框里面选yes或no的问题”】

    OnClientClick是客户端事件方法.一般采用JavaScript来进行处理.也就是直接在IE端运行.一点击就运行. OnClick事件是服务器端事件处理方法,在服务器端,也就是IIS中运行.点 ...