无聊找到一个效果，滚动网页模块被压扁的感觉

　　当鼠标滚动的时候，背景图设置为固定定位，那么效果就是感觉模块被压扁的感觉，再稍微用js更改背景图y轴的定位来增加效果，

background-attachment 以前没用过，这次用到了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box { display:-webkit-box; width:700px;}
.box .item2{ -webkit-box-flex:2; background-color:#fddfdd;}
.box .item3{ -webkit-box-flex:2; background-color:#C63;}
.box .item:first-child { width:200px;}
header { height:700px; background-image:url(01.jpg);
background-size: cover;

background-repeat: no-repeat;
background-attachment: fixed;}
nav { height:900px;}
</style>
</head>

<body>
<div class="ds">
  <header>头</header>
  <nav>导航</nav>
  <aside>侧边栏</aside>
  <article>文章</article>
  <footer>页尾</footer>
</div>

<script>
window.onscroll = function (){
    
     if(document.body.scrollTop>0 || document.documentElement.scrollTop>0){
         
         var top = document.body.scrollTop ;
         if(top<=700){
         var headr = document.getElementsByTagName("header")[0];
         headr.style.backgroundPosition = "0px " + -top/8+"px";
         }
         }
    
    }


</script>
</body>
</html>

 

posted on 2014-05-27 17:19  小苦瓜  阅读(215)  评论(0)  编辑  收藏  举报

导航