您的位置：首页 > Web前端 > JQuery

jquery鼠标滑过图片弹出

2017-02-14 15:30 281 查看 
<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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jquery
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航