目录
2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。
7.Web前端第三季(JavaScript):我自己写的笔记博客
操作:2:成功:202-关于show和hide函数的动画设置
一.目的
1.想：学习前端知识
2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
GitHub - xzy506670541/WebTest: SIKI学院的Web前端
2.SIKI学院:我参考此视频实操
- 我参考此视频实操
3.w3school官网:当做字典使用
4.菜鸟教程：当做字典使用
5.Web前端第一季(HTML):我自己写的笔记博客
6.Web前端第二季(CSS):我自己写的笔记博客
7.Web前端第三季(JavaScript):我自己写的笔记博客
三.注意
操作:1:成功:201-jQuery实现广告弹窗
1.运行结果:成功:
获取并添加事件
$("#id").click(function(){ });获取并设置内容
$("#id").innerHTML = ""; // 错误
$("#id").html("");获取html元素
$("#id")
参数是选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>
<style type="text/css">
#ad{
width: 300px;
height: 300px;
background-color: antiquewhite;
position: fixed;
bottom: 0;
right: 0;
display:none;
}
</style>
<script type="text/javascript">
setTimeout(function(){
$("#ad").show();
},3000);
// setTimeout(function(){
// $("#ad").hide();
// },5000)
$(function(){
$("#closeBtn").click(function(){
$("#ad").hide();
});
});
</script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button>
</div>
</body>
</html>
操作:2:成功:202-关于show和hide函数的动画设置
1.运行结果:成功:
显示和隐藏( 属于effect里面的basic )
show() //相当于 display:block
第一个参数slow fast 毫秒数（速度）
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>
<style type="text/css">
#ad {
width: 300px;
height: 300px;
background-color: antiquewhite;
position: fixed;
bottom: 0;
right: 0;
display: none;
}
</style>
<script type="text/javascript">
// setTimeout(function() {
// //1.show：参数：slow、fast、1000
// //出现：快速
// // $("#ad").show();
// //2.出现：慢慢的
// // $("#ad").show("slow");
// //3.出现：持续一段可以控制的时间
// // $("#ad").show(2000);
// //4.动画播放完毕执行回调函数
// $("#ad").show(2000, function() {
// console.log("show动画执行完毕！");
// });
// }, 1000);
// // 5.
// setTimeout(function() {
// //hide:隐藏
// $("#ad").hide(2000, function() {
// console.log("动画隐藏了");
// });
// }, 5000);
// 6.出现广告
setTimeout(function() {
// $("#ad").toggle();
$("#ad").toggle("slow");
}, 1000);
//点击关闭按钮隐藏广告：通过toggle
$(function() {
$("#closeBtn").click(function() {
// $("#ad").toggle();
$("#ad").toggle("slow");
});
});
// setTimeout(function(){
// $("#ad").hide();
// },5000)
// $(function() {
// $("#closeBtn").click(function() {
// $("#ad").hide();
// });
// });
</script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button>
</div>
</body>
</html>
操作:3:成功:203-滑动和渐隐渐现的动画效果
1.运行结果:成功:
显示和隐藏( 属于effect里面的basic )
show() //相当于 display:block
第一个参数slow fast 毫秒数（速度）
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示
滑动显示和隐藏
slideDown
slideUp
参数跟上面的一样
其他显示和隐藏效果
fadeIn
fadeOut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>
<style type="text/css">
#ad {
width: 300px;
height: 300px;
background-color: antiquewhite;
position: fixed;
bottom: 0;
right: 0;
display: none;
}
</style>
<script type="text/javascript">
// 显示广告：几种方式
setTimeout(function() {
// $("#ad").slideDown();
// $("#ad").slideDown(2000);
// $("#ad").slideToggle(2000);
$("#ad").fadeIn(1000);
// $("#ad").fadeToggle(1000);
$("#ad").fadeTo(1000, 0.5); //1完全透明
}, 1000);
//点击关闭按钮隐藏广告：几种方式
$(function() {
$("#closeBtn").click(function() {
// $("#ad").slideUp();
// $("#ad").slideUp(2000);
// $("#ad").slideToggle(2000);
$("#ad").fadeOut(1000);
// $("#ad").fadeToggle(1000);
// $("#ad").fadeTo(1000,0);//0完全不透明
});
});
</script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button>
</div>
</body>
</html>