jQuery --- 第四期 (jQuery动效)
程序员文章站
2022-05-29 11:58:07
学习笔记 1.jQuery动画的淡入淡出 2.jQuery广告弹窗 ......
学习笔记
1.jquery动画的淡入淡出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery动画的淡入淡出</title>
<style>
body{background-color: #ebebeb}
div{
width :200px;
height :200px;
background-color :red;
display :none;
}
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//动画淡入
$("button").eq(0).click(function(){
$("div").eq(0).fadein(2000,function(){
});
});
//动画淡出
$("button").eq(1).click(function(){
$("div").eq(0).fadeout(2000,function(){
});
});
//淡出入切换
$("button").eq(2).click(function(){
$("div").eq(0).fadetoggle(2000,function(){
})
});
//允许渐变为指定的不透明度（0-1）
$("button").eq(3).click(function(){
$("div").eq(0).fadeto(2000,0.5,function(){
})
});
});
</script>
</head>
<body>
<button>fadein</button>
<button>fadeout</button>
<button>fadetoggle</button>
<button>fadeto</button>
<div></div>
</body>
</html>
2.jquery广告弹窗
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery弹窗广告</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
body{background-color: #ebebeb}
div{
width :200px;
height :200px;
background-color :red;
position :fixed;
right :0;
bottom :0;
display:none;
}
.span{
width:40px;
height:20px;
position:absolute;
background-color:green;
right:0;
top:0;
}
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//监听关闭span
$(".span").click(function(){
$("div").fadeout(1000);
});
//按照动画队列依次执行
$("div").stop().slidedown(1000).fadeout(500).fadein(1000);
});
</script>
</head>
<body>
<div>
<span class="span">关闭</span>
</div>
</body>
</html>