鼠标划入划出

来源：互联网发布：boot repair ubuntu 编辑：程序博客网时间：2024/04/27 16:56
<head>    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0;        }        .box {            width: 100%;            height: 360px;        }        .box ul {            width: 100%;            height: 360px;            margin: 50px auto;        }        .box ul li {            width: 230px;            height: 360px;            float: left;            position: relative;            list-style: none;            margin-left: 20px;            overflow: hidden;        }        .box ul li a {            display: block;            width: 230px;            height: 360px;            background: url(img/new-bg.png) repeat;            left: 0;            position: absolute;            top: 360px;            text-align: center;            overflow: hidden;        }        .box ul li a p {            color: #fff;        }        .box ul li a p:first-child {            margin-top: 70%;        }    </style></head><body>    <div class="box">        <ul>            <li>                <img src="img/150319506733331836.jpg" />                <a>                    <p>品牌钜惠</p>                    <p>点击进入</p>                </a>            </li>            <li>                <img src="img/150319511293266411.jpg" />                <a>                    <p>时尚女装 潮流穿搭</p>                    <p>点击进入</p>                </a>            </li>            <li>                <img src="img/150319514782076693.jpg" />                <a>                    <p>秋装上新</p>                    <p>点击进入</p>                </a>            </li>            <li>                <img src="img/150319518051352431.jpg" />                <a>                    <p>潮流穿搭 时尚钜惠</p>                    <p>点击进入</p>                </a>            </li>            <li>                <img src="img/150319521855064477.jpg" />                <a>                    <p>经典手表</p>                    <p>点击进入</p>                </a>            </li>        </ul>    </div></body><script src="jquery-1.11.0.js"></script><script type="text/javascript">    $(".box ul li").hover(function(e) {        var e = e || event;        move.call(this, e, true)    }, function(e) {        var e = e || event;        move.call(this, e, false)    });    function move(e, bool) {        let top = $(this).offset().top;            bottom = top + $(this).height();            left = $(this).offset().left;            right = left + $(this).width();            height = $(this).height();            width = $(this).width();            x = e.pageX;            y = e.pageY;            sT = Math.abs(y - top);            sB = Math.abs(y - bottom);            sL = Math.abs(x - left);            sR = Math.abs(x - right);            a = Math.min(sT, sB, sL, sR);        switch(a) {            case sT:                if(bool) {                    $(this).find("a").css({                        top: -height + "px",                        left: 0                    }).stop().animate({                        top: 0,                        left: 0                    }, 300)                } else {                    $(this).find("a").stop().animate({                        top: -height + "px",                        left: 0                    }, 300)                }                console.log("上")                break;            case sB:                if(bool) {                    $(this).find("a").css({                        top: height + "px",                        left: 0                    }).stop().animate({                        top: 0,                        left: 0                    }, 300)                } else {                    $(this).find("a").stop().animate({                        top: height + "px",                        left: 0                    }, 300)                }                console.log("下")                break;            case sL:                if(bool) {                    $(this).find("a").css({                        top: 0,                        left: -width + "px"                    }).stop().animate({                        top: 0,                        left: 0                    }, 300)                } else {                    $(this).find("a").stop().animate({                        top: 0,                        left: -width + "px"                    }, 300)                }                console.log("左")                break;            case sR:                if(bool) {                    $(this).find("a").css({                        top: 0,                        left: width + "px"                    }).stop().animate({                        top: 0,                        left: 0                    }, 300)                } else {                    $(this).find("a").stop().animate({                        top: 0,                        left: width + "px"                    }, 300)                }                console.log("右")                break;            default:                break;        }    }</script>
阅读全文
0 0