jQuery学习示例------点击红色方块实现左右晃动

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript">
	  $(function(){
	  	$("div").click(function(){
	  		if($(this).hasClass("red")){
	  			$(this)
	  			       .animate({left:120})
	  			       .animate({left:240})
	  			       .animate({left:0})
	  			       .animate({left:240})
	  			       .animate({left:120});
	  		}
	  	})
	  });
      
	</script>
	<style type="text/css">
	  div{
	  	position: absolute;
	  	width: 100px;
	  	height: 100px;
	  }
	  .blue{
	  	left: 0px;
	  	background: blue;
	  }
	  .red{
	  	left: 120px;
	  	background: red;
	  	z-index: 1;
	  }
	  .green{
	  	left: 240px;
	  	background: green;
	  }
	  .pos{
	  	top: 120px;
	  }
	</style>
</head>
<body>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red pos"></div>
</body>
</html>


运行结果:

jQuery学习示例------点击红色方块实现左右晃动,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。