87,910
社区成员
发帖
与我相关
我的任务
分享请教，这种横向切换展示图片的制作思路
http://1.baidu.com/product/detail?product_id=d549939975f0e194938307b5
...全文
请发表友善的回复…
发表回复
KingWTD 2015-02-26
- 打赏
- 举报
jQuery中的each方法就是for循环，一般实现动画都都是使用animate方法。
helloword222 2015-02-24
- 打赏
- 举报
不知道使用for循环是否能够实现？
helloword222 2015-02-24
- 打赏
- 举报
谢谢。。。。。。
KingWTD 2015-02-16
- 打赏
- 举报
<!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" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<title>Slide Sample</title>
<style type="text/css">
body {
background-color: #6efd9d;
}
/* container-struts
**************************/
.container {
margin: 0 auto;
width: 1000px;
height: 460px;
overflow: hidden;
}
.container .pool {
height: 460px;
width: 8000px;
}
.container .pool .scope {
float: left;
width: 145px;
overflow: hidden;
margin-left: 10px;
cursor: pointer;
}
.container .pool .scope img {
margin-left: -150px;
}
</style>
</head>
<body>
<div class="container">
<div class="pool">
<div class="scope" style="margin-left:0;width:690px">
<img src="http://hiphotos.baidu.com/pay-operone/wh%3D690%2C460/sign=3c98994dfc1986184112e78273dd0247/d0c8a786c9177f3ee88ae02174cf3bc79f3d565b.jpg" style="margin-left:0" />
</div>
<div class="scope">
<img src="http://hiphotos.baidu.com/pay-operone/wh%3D690%2C460/sign=18b4bcd6d5c8a786be7f42085e39e509/cb8065380cd79123aa768858a9345982b2b78003.jpg" />
</div>
<div class="scope">
<img src="http://hiphotos.baidu.com/pay-operone/wh%3D690%2C460/sign=356312db9b3df8dca6688797f4215ebf/b3b7d0a20cf431ad8e435f154f36acaf2edd980c.jpg" />
</div>
</div>
<div>
<script type="text/javascript">
$(".container .pool .scope").each(function() {
$(this).mouseenter(function(evt) {
var that = this;
$(".container .pool .scope").each(function() {
if (that == this) {
$(this).stop(true, false).animate({width: "690px"}, "slow");
$(this).find("img").stop(true, false).animate({marginLeft: "0"}, "slow");
} else {
$(this).stop(true, false).animate({width: "145px"}, "slow");
$(this).find("img").stop(true, false).animate({marginLeft: "-150px"}, "slow");
}
});
});
});
</script>
</body>
</html>
似梦飞花 2015-02-16
- 打赏
- 举报
.product-details .show-left .middle-part {
left: 700px;
}
.product-details .banner .middle-part {
left: 155px;
width: 145px;
}
看这几个值的变化
