1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: