鼠标移入图片右移

作者: 加冰宝贝 | 来源:发表于2018-06-21 20:39 被阅读16次

鼠标移入图片右移
3d灵动的book
Axure教程：图片放大缩小制作步骤详解
【起点精选】Axure：大气手风琴图片展示效果的制作
实现鼠标移入图片散开
03自动轮播
jQuery突出展示案例
图片放大镜功能
js注入鼠标移入移出事件
js原生动效

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

        .lanren {
            width: 663px;
            border: solid #e5e5e5;
            border-width: 1px 0 0 1px;
            margin: 50px auto;
        }

        .lanren ul {
            overflow: hidden;
            list-style: none;
        }

        .lanren ul li {
            float: left;
            width: 200px;
            height: 100px;
            padding: 15px 10px 10px 10px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            cursor: pointer;
        }

        .lanren ul li img {
            width:100px;
            float: left;
            margin-right: 10px;
            /* 图片的margin值*/
        }

        .lanren ul li p {
            text-align: left;
            color: #666;
            font-size: 12px;
            margin-bottom: 5px;
            line-height: 140%;
            max-height: 32px;
            overflow: hidden;
        }

        .lanren ul li b {
            color: #e12228;
            font-size: 16px;
            font-weight: 700;
        }
    </style>
</head>
<body>

<div class="lanren">
    <ul>
        <li>
            <img src="1.jpg" alt=""/>
            <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
        </li>
        <li>
            <img src="1.jpg" alt=""/>
            <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
        </li>
        <li>
            <img src="1.jpg" alt=""/>
            <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
        </li>
        <li>
            <img src="1.jpg" alt=""/>
            <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
        </li>
        <li>
            <img src="1.jpg" alt=""/>
            <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
        </li>
        <li>
            <img src="1.jpg" alt=""/>
            <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
        </li>
    </ul>
</div>


<script src="jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        $('.lanren li').hover(function () {
            $(this).find('img').stop().animate({
                'margin-left': '-10px',
                'margin-right': '20px'   //margin-right加了10px，防止p元素移动
            }, 500);
        }, function () {
            $(this).find('img').stop().animate({
                'margin-left': '0px',
                'margin-right': '10px'
            }, 500);
        });
    });
</script>
</body>
</html>