今天产品搞了个京东的效果,仿造啊,完全是仿造。。。唉,没办法,仿造还是要造,,,虽是仿造,但是JS是原创, 效果图如下:
代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿京东图片展示效果</title>
<script src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var a = 0;//初始第一个图片宽度最大
$(".box > div").each(function(i, e) {
$(e).hover(
function() {//鼠标移入事件
//上次鼠标移出的图片宽度渐变到150px
$(".box > div:nth-child(" + (a+1) + ")").stop().animate({width : "150px"}, "slow");
//当前鼠标移入的图片宽度渐变到190px
$(e).stop().animate({width : "190px"}, "slow");
},
function () {//鼠标移出事件
a = i;//记录鼠标移出的图片位置
}
);
});
});
</script>
<style>
.item{ float:left; width:190px;}
.item_small{width: 150px;float:left; overflow:hidden;}
.box{ overflow:hidden; width:795px; }
img{ border:0; display:block;}
</style>
</head>
<body>
<div class="box">
<div class="item">
<a target="_blank" href="#"><img src="http://img11.360buyimg.com/da/g10/M00/15/16/rBEQWVFtEqEIAAAAAAAeKGD5rkEAAEPPAGtKzQAAB5A465.jpg"></a>
<a target="_blank" href="#"><img src="http://img10.360buyimg.com/da/g10/M00/15/16/rBEQWVFtEoIIAAAAAAAcmcjeJw4AAEPOwHa0K4AAByx111.jpg"></a>
</div>
<div class="item_small" >
<a target="_blank" href="#"><img src="http://img10.360buyimg.com/da/g10/M00/15/03/rBEQWVFrcAIIAAAAAABw68LxjaUAAEHsQJngZIAAHED397.jpg"></a>
</div>
<div class="item_small" >
<a target="_blank" href="#"><img src="http://img14.360buyimg.com/da/g10/M00/15/16/rBEQWFFtEygIAAAAAAAx0E7XOKsAAEPQQFHfgkAADHo158.jpg"></a>
<a target="_blank" href="#"><img src="http://img10.360buyimg.com/da/g10/M00/15/16/rBEQWFFtE9gIAAAAAAA5ufLmAdQAAEPRwGFEOMAADnR926.jpg"></a>
</div>
<div class="item_small" >
<a target="_blank" href="#"><img src="http://img13.360buyimg.com/da/g10/M00/15/0D/rBEQWFFsn7gIAAAAAAB15kOAPsAAAELygFLgggAAHX-123.jpg"></a>
</div>
<div class="item_small" >
<a target="_blank" href="#"><img src="http://img14.360buyimg.com/da/g10/M00/15/0D/rBEQWFFspXEIAAAAAAA0agfp9Q4AAEL1wHzgowAADSC015.jpg"></a>
<a target="_blank" href="#"><img src="http://img14.360buyimg.com/da/g10/M00/15/01/rBEQWFFrVEQIAAAAAAAhR9UijEEAAEHBgIohBAAACFf480.jpg"></a>
</div>
</div>
</body>
</html>