您的位置：首页 > Web前端 > JQuery

仿京东图片左右切换效果jquery

2013-04-17 18:40 453 查看

今天产品搞了个京东的效果，仿造啊，完全是仿造。。。唉，没办法，仿造还是要造，，，虽是仿造，但是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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 仿京东滚动

相关文章推荐

新的分享

章节导航