jquery鼠标滑过图片弹出

最新推荐文章于 2022-10-22 20:36:26 发布

晴耕雨读ljl

最新推荐文章于 2022-10-22 20:36:26 发布

阅读量758

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/ljl2213210338/article/details/55100095

版权

 <script src="../jquery-1.12.4.js"></script>
	css属性
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .img1{
		注意，一定要是小的图片绝对定位
            position: absolute;
            width: 80px;
            height: 320px;
            float: left;
            margin-left: -5px;
        }
        .img2{
            height: 320px;
            float: left;
            margin-left: -350px;
        }
    </style>
</head>
<body>
        <div class="div1">
            <img src="../img/8.jpg" alt="" class="img1">
            <img src="../img/7.jpg" alt="" class="img2">
        </div>
</body>
<script>
    $('.div1').hover(function(){
        $('.img2').animate({'margin-left':'75px'},500).clearQueue;
    }, function () {
        $('.img2').animate({'margin-left':'-350px'},500).clearQueue;
    })

  /* $('.div1').mouseenter(function(){
       //$('.img2').css({'display':'block'})
        $('.img2').animate({'margin-left':'75x'},500).clearQueue();
    })
    $('.div1').mouseleave(function () {
        $('.img2').animate({'margin-left':'-350px'},500).clearQueue();
    })*/
</script>
</html>

晴耕雨读ljl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery鼠标滑过图片弹出

script src="../jquery-1.12.4.js">script> css属性 style> *{ margin: 0px; padding: 0px; } .img1{ 注意，一定要是小的图片绝对定位 position: absolute;
复制链接

扫一扫