<!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. union与union的区别

    把2个具有相同列及数据类型的 结果 放到一起显示,并且不去重.select a,b,c from table1union allselect ca,cb,cc from table2 而union会对 ...

  2. Spring事务管理 -- 挺好

    Spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作.今天一起学习一下Spring的事务管理.Spring的事务管理分为声明式跟编程式.声明式就是在Spring的配置文件中进行相关配置 ...

  3. 转ORA-28002: the password will expire within 7 days 解决方法

    最后一步要改密码,否则还会报错. 1. 查看用户的profile设置: SELECT username,profile FROM dba_users; 一般用户的profile设置都为DEFAULT. ...

  4. UVa 839 天平

    原题链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  5. N皇后回溯解法 leetcode N-Queens

    class Solution { public: vector<vector<string> > solveNQueens(int n) { vector<vector& ...

  6. makefile基础实例讲解 分类： C/C++ 2015-03-16 10:11 66人阅读 评论(0) 收藏

    一.makefile简介 定义:makefile定义了软件开发过程中,项目工程编译链.接接的方法和规则. 产生:由IDE自动生成或者开发者手动书写. 作用:Unix(MAC OS.Solars)和Li ...

  7. kuangbin_ShortPath O (LightOJ 1074)

    这是什么鬼OJ啊都没见过害的我还交错语言CE了一发摔 想着懒得重写了直接把上一题的dij改了改就交了 然后RE 反应过来这题有负环 想着怎么标记负环同时不直接结束spfa 看了别人的代码感叹了一下我还 ...

  8. jquery轻松操作CSS样式

    $(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”); ...

  9. Git-rebase与merge小结

    git merge是用来合并两个分支的. git merge b # 将b分支合并到当前分支 同样 git rebase b,也是把 b分支合并到当前分支 ---------------------- ...

  10. Linux-某电商网站流量劫持案例分析与思考

    [前言] 自腾讯与京东建立了战略合作关系之后,笔者网上购物就首选京东了.某天在家里访问京东首页的时候突然吃惊地发现浏览器突然跳到了第三方网站再回到京东,心里第一个反应就是中木马了. 竟然有这样的事,一 ...