仿一淘-气球背景效果

最新推荐文章于 2018-07-14 17:08:31 发布

iteye_6992

最新推荐文章于 2018-07-14 17:08:31 发布

阅读量158

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
#out_div{
margin:0 auto;
}
.divI{
height:1500px;
width:auto;
position:relative;
}
.left{
width:128px;
border-right:1px solid #999;
position:relative;
top:100px;
height:1400px;
float:left;
}
.div1{
background-color:#FFFFCC;
}
.div2{
background-color:#9999FF;
}
.div3{
background-color:#FFCCFF;
}
.div4{
background-color:#CCCCFF;
}
.div5{
background-color:#CC99FF;
}
.ball{
top:-1px;
left:50px;
position:absolute;
width:165px;
height:230px;
}
.ball1{
background:url(ball1.png) no-repeat 0 0;
background-color: #960;
}
.ball2{
background:url(ball1.png) no-repeat -222px 0;
background-color:#036;
}
.ball3{
background:url(ball1.png) no-repeat -446px 0;
background-color:#093;
}
.ball4{
background:url(ball1.png) no-repeat -670px 0;
background-color:#F60;
}
.ball5{
background:url(ball1.png) no-repeat -892px 0;
background-color:#60C;
}
.divII{
width:70%;
height:1400px;
border:1px solid blue;
float:left;
margin-left:10%;
margin-top:50px;
}
</style>
</head>

<body>
<div id="out_div">
<div class="divI div1">
     <div class="left">
     <div class="ball ball1"></div>
</div>
<div class="divII">
     内容
</div>
</div>
<div class="divI div2">
     <div class="left">
        <div class="ball ball2">
  </div>
</div>
<div class="divII">
     内容
</div>
</div>
<div class="divI div3">
     <div class="left">
        <div class="ball ball3"></div>
     </div>
<div class="divII">
     内容
</div>
</div>
<div class="divI div4">
     <div class="left">
        <div class="ball ball4"></div>
     </div>
<div class="divII">
     内容
</div>
</div>
<div class="divI div5">
     <div class="left">
        <div class="ball ball5"></div>
</div>
<div class="divII">
     内容
</div>
</div>
</div>
<script>
/*
* 仿一淘-根据scrollTop改变背景效果；
* ie8，ff，opera测试可用，其他浏览器未测；
* **********made by keimon*************
* ***********2013-01-16**************
*/
$(window).scroll(function(){
   var t = $(document).scrollTop();
   var len = $('.divI').length;
   for(var i=0; i<len; i++){
      var num1 = i*1500+50; //1500是每个背景层的高度，可用根据自己的需求改变（css），
   var num2 = (i+1)*1500; //可以，用$('divI').height()来获得实际的页面高度；
   var j = i+1
   var b = '.ball'+j;
   if(t>num1 && t<num2){
      $(b).css('position','fixed');
   }else{
      $(b).css('position','absolute');
   }
   }
})
</script>
</body>
</html>

iteye_6992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿一淘-气球背景效果

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫

专栏目录