jquery鼠标移入图片左滑动效果

时间：6年前阅读：5593

在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/data/img/dmj/201904051554471444167490.jpg" class="tu">    
		</div>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery鼠标移入图片左滑动效果

网友评论