學習筆記 1.jQuery動畫的淡入淡出 2.jQuery廣告彈窗 ...
學習筆記
1.JQuery顯示和隱藏動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery顯示和隱藏動畫</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
background: green;
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(1000);
});
$("button").eq(1).click(function () {
$("div").hide(1000);
});
$("button").eq(2).click(function () {
$("div").toggle(1000);
});
});
</script>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
</body>
</html>
2.JQuery對聯廣告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery對聯廣告</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: none;
}
.left{
width: 100px;
height: 200px;
float: left;
position: fixed;
top: 100px;
left: 0;
background: purple;
}
.right{
width: 100px;
height: 200px;
float: right;
position: fixed;
top: 100px;
right: 0;
background: purple;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//監聽滑輪滾動事件
$(window).scroll(function () {
//獲得滑輪滾動的距離
var offset = $("html,body").scrollTop();
if(offset >= 200){
$("div").show(1000);
}else{
$("div").hide(1000);
}
});
});
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
3.jQuery展開和收起動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery展開和收起動畫</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 200px;
background: blue;
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
//向下展開
$("div").slideDown(1000);
});
$("button").eq(1).click(function () {
//向上收起
$("div").slideUp(1000);
});
$("button").eq(2).click(function () {
//展開與收起的切換
$("div").slideToggle(1000);
});
});
</script>
</head>
<body>
<button>展開</button>
<button>收起</button>
<button>切換</button>
<div></div>
</body>
</html>
4.JQuery摺疊菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery摺疊菜單</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
margin: auto 600px;
margin-top: 100px;
border: 1px solid #000;
list-style: none;
}
.nav>li{
border: 1px solid #000;
}
div{
width: auto;
height: 100px;
background: blue;
display: none;
}
.current{
background: gray;
}
.red{
background: red;
}
.orange{
background: orange;
}
.yellow{
background: yellow;
}
.green{
background: green;
}
.purple{
background: purple;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(".nav>li").click(function () {
$(this).children("div").slideDown(1000);
$(this).siblings().children("div").slideUp(1000);
});
});
</script>
</head>
<body>
<ul class="nav">
<li>紅
<div class="red"></div>
</li>
<li>橙
<div class="orange"></div>
</li>
<li>黃
<div class="yellow"></div>
</li>
<li>綠
<div class="green"></div>
</li>
<li>紫
<div class="purple"></div>
</li>
</ul>
</body>
</html>
5.jQuery下拉菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery下拉菜單</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
margin: 50px auto;
width: 300px;
height: 50px;
background: red;
}
.sub{
background: orange;
display: none;
}
.sub>li{
list-style: none;
}
.nav>li{
width: 100px;
height: 50px;
list-style: none;
text-align: center;
line-height: 50px;
float: left;
}
.current{
background: gray;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/*
在jQuery中如果想要執行動畫,那麼需要在之前調用動畫元素的stop方法
*/
$(".nav>li").hover(function () {
$(this).addClass("current");
$(this).siblings().removeClass("current");
$(this).children("ul").stop();
$(this).children("ul").slideDown(500);
},function () {
$(this).removeClass("current");
$(this).children("ul").stop();
$(this).children("ul").slideUp(500);
});
$(".sub>li").hover(function () {
$(this).addClass("current");
$(this).siblings().removeClass("current");
},function () {
$(this).removeClass("current");
});
});
</script>
</head>
<body>
<ul class="nav">
<li>一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>二級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>三級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
</ul>
</body>
</html>
6.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>
7.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>
8.JQuery自定義動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery自定義動畫</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//操作屬性
$("button").eq(0).click(function () {
$("div").stop().animate({
width:300,
height:300,
marginLeft:100
},1000,function () {
});
});
//累加屬性
$("button").eq(1).click(function () {
$("div").stop().animate({
width:"+=100"
},1000,function () {
});
});
//關鍵字
$("button").eq(2).click(function () {
$("div").stop().animate({
// width:"hide"
width:"toggle"
},1000,function () {
});
});
});
</script>
</head>
<body>
<button>操作屬性</button>
<button>累加屬性</button>
<button>關鍵字</button>
<div></div>
</body>
</html>
9.jQuery的stop方法和delay方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的stop方法和delay方法</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: green;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").animate({// 增加高度動畫
height:400
},1000).delay(1000).animate({// 增加寬度動畫,延遲一秒
width:400
},1000).delay(1000).animate({// 減少高度動畫,延遲一秒
height:100
},1000).delay(1000).animate({// 減少寬度動畫,延遲一秒
width:100
},1000);
});
$("button").eq(1).click(function () {
/**
* stop()方法:
* 第一個參數:是否停止所有動畫
* 第二個參數:是否立即完成當前動畫
*/
//立即結束當前動畫,繼續下一個動畫
// $("div").stop();
//停止所有動畫
// $("div").stop(true);
$("div").stop(true,false);
//停止所有動畫,並立即完成當前動畫
// $("div").stop(true,true);
//立即完成當前動畫,並繼續下一個動畫
// $("div").stop(false,true);
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<button>停止動畫</button>
<div></div>
</body>
</html>
10.JQuery無限迴圈滾動廣告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery無限迴圈滾動廣告</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul{
width: 1200px;
height: 400px;
background: black;
}
ul>li{
list-style: none;
float: left;
}
.one{
width: 200px;
height: 400px;
background: green;
}
.two{
width: 200px;
height: 400px;
background: orange;
}
.three{
width: 200px;
height: 400px;
background: red;
}
.fore{
width: 200px;
height: 400px;
background: yellow;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
var offect = 0;
var timer;
function autoPlay() {
timer = setInterval(function () {
offect += -10;
if(offect <= -800){
offect = 0;
}
$("ul").css("marginLeft",offect);
},0.01);
}
autoPlay();
$("li").hover(function () {
//停止滾動
clearInterval(timer);
//為所有未被選中的添加蒙版
$(this).siblings().fadeTo(100,0.5);
//去除當前的蒙版
$(this).fadeTo(100,1);
},function () {
//恢復滾動
autoPlay();
//去除所有蒙版
$("li").fadeTo(100,1);
});
});
</script>
</head>
<body>
<div>
<ul class="ad">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="fore"></li>
<li class="one"></li>
<li class="two"></li>
</ul>
</div>
</body>
</html>
