CSS

<style type="text/css">  *{  padding: 0;  margin: 0;  }  #pao{  position: absolute;  width: 400px;  height: 400px;  top: 100px;  left: 0;  }  </style>

JQUERY

		<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>      		<script type="text/javascript">      //			如果元素身上现在有多个运动,stop会停止元素身上现在正在执行的运动,然后开始运行队列中下一个运动      //			如果元素身上现在有多个运动,finish会停止元素身上所有运动,并且将元素的状态立即调整为最后一个运动指定的目标状态      //			(比如:有4个运动12秒最终到达800px这个位置 ，如果点finish，它就把这4个运动清理掉了 ,不用走走停停，不用运动了直接送到终点800px得了)      			$(function(){      				$('#tt1').click(function(){      				$('#pao').animate({'left':'200px'},3000);      				})      				$('#tt2').click(function(){      				$('#pao').animate({'left':'400px'},3000);      				})      				$('#tt3').click(function(){      				$('#pao').animate({'left':'600px'},3000);      				})      				$('#tt4').click(function(){      				$('#pao').animate({'left':'800px'},3000);      				})      				$('#dd').click(function(){      				$('#pao').animate({'left':'600px'},3000);      				})      				$('#stop').click(function(){      //					stop()是停止元素身上正在执行的动画,(说停马上停)      					$('#pao').stop();      				})      				$('#finish').click(function(){      //					finish会停止动画，并且将元素的状态变为运动的最终指定的状态（简单理解：跑完到原来指定的终点再停）      					$('#pao').finish();      				})      			})      		</script>

html

<input type="button" name="dd" id="tt1" value="200" />      <input type="button" name="dd" id="tt2" value="400" />      <input type="button" name="dd" id="tt3" value="600" />      <input type="button" name="dd" id="tt4" value="800" />      <input type="button" name="dd" id="dd" value="来点我呀" />      <input type="button" name="stop" id="stop" value="stop停止" />      <input type="button" name="finifh" id="finish" value="finish停止" />      <img src="e01.gif" id="pao"/>

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