首页 新闻 赞助 找找看

如何用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掉。求解

下面配上图

 

这是小米官网上的效果,或者还有什么方法实现这种效果?

问题补充:

另外不要:hover方法,这个兼容性不行

孤狼之森的主页 孤狼之森 | 初学一级 | 园豆:14
提问于:2016-08-24 10:28
< >
分享
所有回答(7)
0

你应该把全部的代码放上来,我以前做的时候就是把那个阴影部分单独做一个div,这个阴影div全部覆盖在这张图上来,鼠标移上去的时候这个阴影div出现,鼠标移走的时候,这个阴影div隐藏

改吧 | 园豆:104 (初学一级) | 2016-08-24 10:33
0

一般情况是准备两个class,来回切换吧?你代码就这两句?

顾晓北 | 园豆:10844 (专家六级) | 2016-08-24 10:35

他这个没问题,既然第一次移入移出没问题,问题就不是出在remove

支持(0) 反对(0) natureless | 园豆:11 (初学一级) | 2016-08-24 11:11
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");

    })            

 

刘宏玺 | 园豆:14020 (专家六级) | 2016-08-24 11:05
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>

 

aimonengzhu | 园豆:193 (初学一级) | 2016-08-24 12:55
0

不用事件,用鼠标悬浮后加样式不行吗

大黄人 | 园豆:641 (小虾三级) | 2016-08-25 16:40
0

如果别人网站都已经实现了,审查元素一下应该不难吧。

LoveCoder | 园豆:216 (菜鸟二级) | 2016-08-26 17:17
0

这时候就要考验 抠代码的能力了。其实这个效果 直接用css3的 animation写的 js 都不用 。。

Постой! | 园豆:1084 (小虾三级) | 2016-09-08 11:06
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册