jquery鼠标移入图片左滑动效果
在PC端网页应用中，鼠标操作是最为常见和频繁的操作，在用户移动鼠标浏览页面的时候，一些交互特效的提醒会增强用户体验度，也可让用户感觉页面在和他“交流”，从而增加用户在页面的逗留时间，以及增加深层次访问的可能性。
实现思路：1、给#tm鼠标加移入事件，鼠标移到#tm, .tu向左移动离左边只有10px 。快速来回滑动有一个动画(1000毫秒)还没结束再来回切换会有 动画叠加问题 解决方法 .stop()放在前面,可以在每次第二回叠加之前清处前一个。
2、给#tm鼠标移出事件 ，回到原来left: 100px;的位置上去。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tm{ width: 400px; height: 500px; border: 2px solid darkblue; margin: 50px auto; position: relative; } #tm .tu{ width: 300px; height: 400px; border: 1px solid darkgreen; position: absolute; bottom: 0; left: 100px; } </style> <script src="../tu/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); }) // 给#tm鼠标移出事件 $('#tm').mouseleave(function(){ // 回到原来left: 100px;的位置上去 $('#tm .tu').stop().animate({'left':'100px'},1000); }) }) </script> </head> <body> <div id="tm"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201904051554471444167490.jpg" class="tu"> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知