知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等。
html代码:
<div id="box">
<div class="item">
<img src="images/1.jpg" alt="美女" width="956" height="400"/><!--图片四要素-->
<div class="line">爱新鲜</div>
</div>
<div class="item">
<img src="images/2.jpg" alt="美女" width="956" height="400"/>
<div class="line">一衣多穿</div>
</div>
<div class="item">
<img src="images/3.jpg" alt="美女" width="956" height="400"/>
<div class="line">评测擂台</div>
</div>
<div class="item">
<img src="images/4.jpg" alt="美女" width="956" height="400"/>
<div class="line">达人心经</div>
</div>
<div class="item">
<img src="images/5.jpg" alt="美女" width="956" height="400"/>
<div class="line">大咖卖场</div>
</div>
</div>
css代码:
<style type="text/css">
/*CSS层叠样式列表*/
*{margin:0px;padding:0px;}/*通配符 1.对所有元素增加其样式 清楚所有默认内外边距 2.解决不同浏览器的兼容问题*/
body{background:#000;/*背景颜色*/}
#box{
width:1120px;/*宽度 px像素*/
height:400px;/*高度*/
background:#fff;
margin:120px auto 0px;/*上 左右(auto自动相等) 下*/
position:relative;/*相对定位*/
overflow:hidden;/*超出部分隐藏*/
}
#box .item{
position:absolute;/*绝对定位
一般找父级定位 是不区分绝对与相对的 意思就是说不管父级是绝对还是相对,都是可以当做参照物的
*/
top:0px;
left:0px;
}
#box .item .line{
width:20px;
height:260px;
background:#000;
position:absolute;
left:0px;
top:0px;
font-size:18px;/*文字大小*/
padding:140px 10px 0px;
color:#fff;/*文字颜色*/
font-family:"微软雅黑";/*文字样式*/
cursor:pointer;/*鼠标样式*/
opacity:0.8;/*CSS3 盒子透明 0-1*/
border-left:1px solid #fff;/*左边框 粗细 样式 颜色*/
}
</style>
javascript代码:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var arr = [];//数组
var i=0;
//each是自动循环的意思 JQ方法 [0,41,41*2,41*3,41*4]
$("#box .item").each(function(i){//遍历
$(this).css("left",i*41+"px");
arr[i] = i*41;//保存每一个item的left值
});
$("#box .item .line").click(function(){
var _index = $(this).parent().index();//获取序列号
$("#box .item").each(function(i){
if (i<=_index)
{
//符合条件部分
$(this).animate({left:arr[i]+"px"},500);
}else{
//不符合条件部分
$(this).animate({left:arr[i]+915+"px"},500);
}
});
});
</script>
转载于:https://blog.51cto.com/13457136/2087621