温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-08-06 09:26:29 阅读:421 作者:xiaojing___ 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>
<!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;
	  	width100px;
	  	height100px;
	  }
	  .blue{
	  	left0px;
	  	background: blue;
	  }
	  .red{
	  	left120px;
	  	background: red;
	  	z-index1;
	  }
	  .green{
	  	left240px;
	  	background: green;
	  }
	  .pos{
	  	top120px;
	  }
	</style>
</head>
<body>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red pos"></div>
</body>
</html>

运行结果:

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

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×