首页 > 代码库 > jQuery学习示例------点击红色方块实现左右晃动
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>运行结果：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。