京东首页鼠标经过效果实现 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            background-color: darkorange;
            position: absolute;
            top: 500px;
            left: 30px;
        }

        .div2 {
            position: relative;
            height: 1px;
            background-color: #ddd;
            margin: 20px auto;
            width: 1200px;
            cursor: pointer;
        }

        .div2 i {
            position: absolute;
            top: 0;
            right: 0px;
            width: 300px;
            height: 1px;
            background-color: red;
        }

        .div3 {
            width: 200px;
            height: 300px;
            background: #ccc;
            position: relative;
            margin: 30px auto;
            cursor: pointer;
        }

        .div3 i {
            width: 30px;
            height: 538px;
            position: absolute;
            top: 46px;
            left: 10px;
            /*background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));*/
            background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            transform:rotate(60deg) translate(-300px,-30px);
           transition:all 0.6s linear 0s;
           /*  animation-fill-mode:forwards;*/
        }

    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"><i></i></div>
<div class="div3"><i></i></div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

<script>
    $(".div2").on("mouseover", function () {
        $(".div2 i").css("left", 0);
        $(".div2 i").animate({left: "900px"}, 500)
    });
    $(".div3").hover(function(){
        $(this).find("i").css("display","block");
        $(this).find("i").animate({top:"452px",left:"252px"})
    },function(){
        $(this).find("i").css({display:"none",top:"46px",left:"10px"})
    })
</script>

</body>
</html>

 

posted @ 2016-08-09 15:14  dongxiaolei  阅读(385)  评论(0)    收藏  举报