完成本阶段中响应事件简的动画效果案例

原创 2018-12-07 18:18:59 222
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{margin:100px 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{margin:100px 100px; float: left;}
#box1,#box2,#box3,#box4,#box5{height: 400px;width: 200px;border:1px solid #ccc;float:left;background-color: red}
.no1{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px}
.no2{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px;}
.no3{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px}

.no4{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px}

.no5{width: 200px;height: 400px;background-color: #393939;opacity: 1;line-height: 400px;color: #fff;text-align: center;font-size: 12px}

</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#box1").click(function(){
$(".no1").animate({
"width":"toggle",
},1000);})

$("#box2").dblclick(function(){
//alert("aa");
$(".no2").animate({
"width":"0px",
"height":"0px",
"margin":"200px 100px",
'fontSize':'1px'
},1000);})


$("#box2").mouseleave(function(){
//alert("aa");
$(".no2").animate({
"width":"200px",
"height":"400px",
"margin":"0px 0px",
"fontSize":"30px"

},1000);})
var m = 1;
$("#box3").click(function(){
if(m){
$(".no3").hide();
m=0;
}else{
$(".no3").show();
m=1
}
})

$("#box4").click(function(){
$(".no4").slideToggle(1000);
})

$("#box5").click(function(){
$(".no5").fadeToggle(2000);
})


})
</script>
</head>
<body>
<div id ="box">
<div id="box1">
<div>单击左划、再点击返回</div>
</div>
<div id="box2">
<div>双击收小</div>
</div>
<div id="box3">
<div>单击隐藏、再单击返回</div>
</div>
<div id="box4">
<div>单击上下滑动</div>
</div>
<div id="box5">
<div>单击淡进淡出

</div></div>

</div>
</body>
</html>

20181207181524.png

发布手记

热门词条