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




	test
	
	
	  $(function(){
	  	$("div").click(function(){
	  		if($(this).hasClass("red")){
	  			$(this)
	  			       .animate({left:120})
	  			       .animate({left:240})
	  			       .animate({left:0})
	  			       .animate({left:240})
	  			       .animate({left:120});
	  		}
	  	})
	  });
      
	
	
	  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;
	  }
	


    
    
    
    

成都创新互联自2013年起,先为凤城等服务建站,凤城等地企业,进行企业商务咨询服务。为凤城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

运行结果:

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

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


分享文章:jQuery学习示例------点击红色方块实现左右晃动
文章来源:http://hxwzsj.com/article/ppcocj.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 成都网站制作 品牌网站建设 自适应网站建设 温江网站设计 成都网站设计 重庆网站建设 成都网站建设 成都网站设计 企业网站建设 成都营销网站建设 网站设计公司 成都h5网站建设 自适应网站设计 成都网站设计 公司网站建设 网站建设改版 成都网站制作 手机网站建设 成都网站建设公司 成都网站设计 手机网站制作设计 定制网站设计