03
2018
08

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/data/img/dmj/201902101549762317188769.jpg"/ class="tu">    
		</div>    
		<div class="tm">    
			<img src="https://www.qiquanji.com/data/img/dmj/201902101549762317188769.jpg"/ class="tu">    
		</div>    
		<div class="tm">    
			<img src="https://www.qiquanji.com/data/img/dmj/201902101549762317188769.jpg"/ class="tu">    
		</div>    
		<div class="tm">    
			<img src="https://www.qiquanji.com/data/img/dmj/201902101549762317188769.jpg"/ class="tu">    
		</div>    
	</body>    
</html>

原文链接:https://www.qiquanji.com/post/7628.html

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

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。