返回完成本阶段中响......登陆

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

҈果҈果҈果҈ ҈ ҈2018-12-07 18:18:5939
<!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

最新手记推荐

• 页面中常见垂直三级导航• 商品导航功能• 搭建后台模板• 常用导航二级菜单布局-浮动、定位• 常用导航条布局-浮动、小图标添加、div命名规则减少代码量

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网