<!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. codevs 2216 线段树 两种更新方式的冲突

    题目描述 Description “神州“载人飞船的发射成功让小可可非常激动,他立志长大后要成为一名宇航员假期一始,他就报名参加了“小小宇航员夏令营”,在这里小可可不仅学到了丰富的宇航知识,还参与解决 ...

  2. Testing Round #8 A. IQ Test 水题

    题目链接:http://codeforces.com/problemset/problem/328/A 这道题目wa了一次,注意这句话: You should also print 42 if the ...

  3. HDU 1241 Oil Deposits --- 入门DFS

    HDU 1241 题目大意:给定一块油田,求其连通块的数目.上下左右斜对角相邻的@属于同一个连通块. 解题思路:对每一个@进行dfs遍历并标记访问状态,一次dfs可以访问一个连通块,最后统计数量. / ...

  4. linux账户管理[转自vbird]

    useraddpasswdchageusermoduserdelfingerchfnchshidgroupaddgroupmodgroupdelgpasswd useradd 完全参考默认值创建一个用 ...

  5. Linux 的账号与群组[转自vbird]

    Linux 的账号与群组 管理员的工作中,相当重要的一环就是『管理账号』啦!因为整个系统都是你在管理的, 并且所有一般用户的账号申请,都必须要透过你的协助才行!所以你就必须要了解一下如何管理好一个服务 ...

  6. EDIUS设置自定义输出的方法

    在做后期视频剪辑时,往往根据需求,需要输出不同分辨率格式的视频文件,那在EDIUS中,如何自定义输出设置,使之符合自己的需要呢?下面小编就来详细讲讲EDIUS自定义输出的一二事吧. 当剪辑完影片,设置 ...

  7. java_list,set,map集合

    一.集合定义 集合就是讲诺干用途相同.近似的“数据”结合成一个整体 集合从体系上分为三种 1.列表(List):List集合区分元素的顺序,允许包含相同的元素 2.集(set):Set集合不区分元素的 ...

  8. wikioi1012 最大公约数和最小公倍数问题（2001年NOIP全国联赛普及组）

    题目描述 Description 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件:  1.P,Q是正整 ...

  9. 【性能诊断】七、并发场景的性能分析（windbg案例，线程阻塞）

    简单整理一个测试Demo,抓取dump并验证,步骤如下: Symbol File Path:SRV*C:\Symbols*http://msdl.microsoft.com/download/symb ...

  10. Genymotion出现Unable to load VirtualBox engine问题--100%解决

    首先强调一个事情,作为程序员,一定要养成一个习惯:安装软件时尤其像VirtualBox这类,首先设置其"兼容模式"以及"特权等级" . 环境:win7 64bi ...