jquery实现鼠标移入图片左滑效果
在网页制作的过程中少不了用到各种动画,而jQuery实现动画效果是很多前端人员比较喜欢用的。下面提到的是使用鼠标移入图片左滑效果。本文实例讲述了jQuery中animate()方法用法。分享给大家供大家参考。具体分析如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .tm{ width: 350px; height: 500px; border: 2px solid darkblue; float: left; position: relative; margin: 10px; } .tm .tu{ width: 300px; height: 400px; border: 1px solid darkgreen; position: absolute; bottom: 0; left: 50px; } </style> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 给.tm鼠标加移入事件 $('.tm').mouseenter(function(){ // 鼠标移到.tm, .tu向左移动离左边只有10px // $('.tm .tu').animate({'left':'10px'},1000); // 快速来回滑动有一个动画(1000毫秒)还没结束再来回切换会有 动画叠加问题 解决方法 .stop()放在前面,可以在每次第二回叠加之前清处前一个 // $('.tm .tu').stop().animate({'left':'10px'},1000); // find 选择的所有.tu元素~~~是被点到.tm(this)其中的一个 里所有的子代.tu标签(儿子辈,孙子辈,重孙子辈.....都能被选中) $(this).find('.tu').stop().animate({'left':'10px'},1000); }) // 给.tm鼠标移出事件 $('.tm').mouseleave(function(){ // 回到原来left: 50px;的位置上去 // $('.tm .tu').stop().animate({'left':'50px'},1000); // 和上面的一样，加$(this).find('.tu') $(this).find('.tu').stop().animate({'left':'50px'},1000); }) }) </script> </head> <body> <div class="tm"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902101549762317188769.jpg"/ class="tu"> </div> <div class="tm"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902101549762317188769.jpg"/ class="tu"> </div> <div class="tm"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902101549762317188769.jpg"/ class="tu"> </div> <div class="tm"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902101549762317188769.jpg"/ class="tu"> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知