学习笔记
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>