<!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. leetcode 145. Binary Tree Postorder Traversal ----- java

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  2. Codeforces Round #112 (Div. 2)

    Codeforces Round #112 (Div. 2) C. Another Problem on Strings 题意 给一个01字符串,求包含\(k\)个1的子串个数. 思路 统计字符1的位 ...

  3. Dijkstra + 优先队列优化 模板

    #include <cstdio> #include <cstring> #include <queue> #include <vector> #inc ...

  4. linux下常用文件传输命令 （转）

    因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...

  5. c++文件操作相关

    file operation API functions HANDLE CreateFile(lpFileName,dwDesiredAccess,dwShareMode,lpSecurityAttr ...

  6. Qt事件和信号的区别 .

    仔细来看,事件与信号其实并无多大差别,从我们对其需求上来说,都只要能注册事件或信号响应函数,在事件或信号产生时能够被通知到即可.但有一项区别在于,事件处理函数的返回值是有意义的,我们要根据这个返回值来 ...

  7. JSBinding + SharpKit / 需要注意及不支持的列表

    1) 序列化不支持 public List<T>,其余都支持(JSBinding+Bridge无此功能) 2015年11月5日 补充:序列化只处理 Field.目前发现 Animation ...

  8. Unity动画

    Unity 并没有自带建模工具. 3D建模工具 maya, 3dmax, blender Skinned Mesh Renderer Mesh Renderer Mesh Filter Modelli ...

  9. PCA人脸识别

    人脸数据来自http://www.cl.cam.ac.uk/research/dtg/attarchive/facedatabase.html 实现代码和效果如下.由于图片数量有限(40*10),将原 ...

  10. 007. 自定义ListBox的item的宽高, 字体居中

    /// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...