如何用JQ实现鼠标划过商品图片向上移附加阴影效果
0
悬赏园豆：160
[待解决问题]
小米网中鼠标经过商品图片的时候，图片会轻微向上移动并有阴影效果，鼠标移开恢复原始位置，并取消阴影效果。
请问怎么用JQ实现，新手原因昨天想用原生JS做没做出来。后来用JQ做有bug
我的思路是这样一个容器包着一个图片，容器position：relative； 图片设置position:absolute
如果一个图片是620px的高，父容器是不是要设置630px才能一会让图片想上移10px 还是父容器可以和图片等高？
然后选择图片
$("#img").mouseover(function(){
$("#img").animate({bottom:"5px"});
$("#img").addClass("shadow"); //shadow是个阴影样式//
})
$("#img").mouseout(function(){
$("#img").animate({top:"5px"});
$("#img").removeClss("shadow");
})
效果是实现了但是哟bug，第一次鼠标移入移开的时候正常，第二次鼠标移入移开的时候不起作用了，图片不会在向上移，并且阴影样式没有被remove掉。求解
下面配上图
这是小米官网上的效果，或者还有什么方法实现这种效果？
所有回答(7)
0
你应该把全部的代码放上来，我以前做的时候就是把那个阴影部分单独做一个div，这个阴影div全部覆盖在这张图上来，鼠标移上去的时候这个阴影div出现，鼠标移走的时候，这个阴影div隐藏
0
一般情况是准备两个class，来回切换吧？你代码就这两句？
他这个没问题，既然第一次移入移出没问题，问题就不是出在remove
1
$("#img").mouseover(function(){ $("#img").animate({bottom:"5px"}); $("#img").addClass("shadow"); //shadow是个阴影样式// }) $("#img").mouseout(function(){ $("#img").animate({top:"5px"},function(){ $("#img").css({top:0,bottom:0}); }); $("#img").removeClss("shadow"); })
0
楼上说准备另外一个class，鼠标移上去添加，鼠标移走删除。我看了小米网上的操作，应该也是这么做的。
小米准备的class里面用了CSS3操作动态效果。如果你用animate的话可以这样。
（建议以后代码贴全）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<style type="text/css">
body {
background: #f5f5f5;
}
#img ul {
height: 614px;
list-style: none;
}
#img ul li {
height: 260px;
padding: 20px 0;
background: #fff none repeat scroll 0 0;
float: left;
margin-bottom: 14px;
margin-left: 14px;
position: relative;
transition: all 0.2s linear 0s;
width: 234px;
z-index: 1;
list-style: none;
}
#img ul li.active {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
position: relative;
}
#img ul li a {
display: block;
text-decoration: none;
list-style: none;
position: absolute;
left: 50%;
margin-left: -80px;
}
#img ul li img {
width: 160px;
height: 160px;
border: 0 none;
}
</style>
<script type="text/javascript">
window.onload = function() {
iHover();
}
function iHover() {
var oLi = document.getElementById("img").getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++) {
oLi[i].onmouseover = function() {
this.setAttribute('class','active');
$(this).animate({
top:10
},30)
}
oLi[i].onmouseout = function(){
this.setAttribute('class','')
$(this).animate({
top:0
},30)
}
}
}
</script>
</head>
<body>
<div id="img">
<ul>
<li class="item">
<a href="#">
<img src="1.jpg" width="160px" height="160px" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="2.jpg" width="160px" height="160px" alt="">
</a>
</li>
<li class="item">
<a href="#">
<img src="1.jpg" width="160px" height="160px" alt="">
</a>
</li>
</ul>
</div>
</body>
</html>
0
不用事件,用鼠标悬浮后加样式不行吗
0
如果别人网站都已经实现了，审查元素一下应该不难吧。
0
这时候就要考验 抠代码的能力了。其实这个效果 直接用css3的 animation写的 js 都不用 。。
