事件的移入和移出
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 .father{ 11 width: 200px; 12 height: 200px; 13 background: red; 14 } 15 .son{ 16 width: 100px; 17 height: 100px; 18 background: blue; 19 } 20 </style> 21 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 22 <script type="text/javascript"> 23 $(function(){ 24 //mouseover/mouseout事件，子元素被移入和移出也会触发到父元素 25 26 //mouseenter/mousuleave事件，子元素被移入和移出不会触发父元素 27 $(".father").mouseenter(function(){ 28 alert("father移入"); 29 }); 30 $(".father").mouseleave(function(){ 31 alert("father移出"); 32 }); 33 34 //上面的方法等同与下面的hover方法，得先enter，再leave 35 /* 36 $(".father").hover(function(){ 37 alert("father移入"); 38 },function(){ 39 alert("father移出"); 40 }); 41 */ 42 }); 43 </script> 44 </head> 45 <body> 46 <div class="father"> 47 <div class="son"></div> 48 </div> 49 </body> 50 </html>
电影排行榜
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>35-电影排行榜下</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 300px; 13 height: 450px; 14 margin: 50px auto; 15 border: 1px solid #000; 16 } 17 .box>h1{ 18 font-size: 20px; 19 line-height: 35px; 20 color: deeppink; 21 padding-left: 10px; 22 border-bottom: 1px dashed #ccc; 23 } 24 ul>li{ 25 list-style: none; 26 padding: 5px 10px; 27 border: 1px dashed #ccc; 28 } 29 ul>li:nth-child(-n+3) span{ 30 background: deeppink; 31 } 32 ul>li>span{ 33 display: inline-block; 34 width: 20px; 35 height: 20px; 36 background: #ccc; 37 text-align: center; 38 line-height: 20px; 39 margin-right: 10px; 40 } 41 .content{ 42 overflow: hidden; 43 margin-top: 5px; 44 display: none; 45 } 46 .content>img{ 47 width: 80px; 48 height: 120px; 49 float: left; 50 } 51 .content>p{ 52 width: 180px; 53 height: 120px; 54 float: right; 55 font-size: 12px; 56 line-height: 20px; 57 } 58 .current .content{ 59 display: block; 60 } 61 </style> 62 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 63 <script> 64 $(function () { 65 $("li").hover(function(){ 66 $(this).addClass("current"); 67 },function(){ 68 $(this).removeClass("current"); 69 }) 70 }); 71 </script> 72 </head> 73 <body> 74 <div class="box"> 75 <h1>电影排行榜</h1> 76 <ul> 77 <li><span>1</span>电影名称 78 <div class="content"> 79 <img src="../img/img-02.jpg" alt=""> 80 <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p> 81 </div> 82 </li> 83 <li><span>2</span>电影名称 84 <div class="content"> 85 <img src="../img/img-02.jpg" alt=""> 86 <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p> 87 </div> 88 </li> 89 <li><span>3</span>电影名称 90 <div class="content"> 91 <img src="../img/img-02.jpg" alt=""> 92 <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p> 93 </div> 94 </li> 95 <li><span>4</span>电影名称 96 <div class="content"> 97 <img src="../img/img-02.jpg" alt=""> 98 <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p> 99 </div> 100 </li> 101 <li><span>5</span>电影名称 102 <div class="content"> 103 <img src="../img/img-02.jpg" alt=""> 104 <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p> 105 </div> 106 </li> 107 <li><span>6</span>电影名称 108 <div class="content"> 109 <img src="../img/img-02.jpg" alt=""> 110 <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p> 111 </div> 112 </li> 113 </ul> 114 </div> 115 </body> 116 </html>
Tab选项卡
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 440px; 13 height: 298px; 14 border: 1px solid #000; 15 margin: 50px auto; 16 } 17 .nav>li{ 18 list-style: none; 19 width: 110px; 20 height: 50px; 21 background: orange; 22 text-align: center; 23 line-height: 50px; 24 float: left; 25 } 26 .nav>.current{ 27 background: #ccc; 28 } 29 .content>li{ 30 list-style: none; 31 display: none; 32 } 33 .content>.show{ 34 display: block; 35 } 36 </style> 37 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 38 <script> 39 $(function () { 40 41 // 1.监听选项卡的移入事件 42 $(".nav>li").mouseenter(function () { 43 44 // 1.1修改被移入选项卡的背景颜色 45 $(this).addClass("current"); 46 47 // 1.2还原其它兄弟选项卡的背景颜色 48 $(this).siblings().removeClass("current"); 49 50 // 1.3获取当前移出选项卡的索引 51 var index = $(this).index(); 52 53 // 1.4根据索引找到对应的图片 54 var $img = $(".content>li").eq(index); 55 // 1.5隐藏非当前的其它图片 56 $img.siblings().removeClass("show"); 57 58 // 1.6显示对应的图片 59 $img.addClass("show"); 60 }); 61 }); 62 </script> 63 </head> 64 <body> 65 <div class="box"> 66 <ul class="nav"> 67 <li class="current">H5+C3</li> 68 <li>jQuery</li> 69 <li>C语言</li> 70 <li>Go语言</li> 71 </ul> 72 <ul class="content"> 73 <li class="show"><img src="../img/img-02.jpg" alt="" width="440px"></li> 74 <li><img src="../img/img-03.jpg" alt="" width="440px"></li> 75 <li><img src="../img/img-02.jpg" alt="" width="440px"></li> 76 <li><img src="../img/img-03.jpg" alt="" width="440px"></li> 77 </ul> 78 </div> 79 </body> 80 </html>
显示和隐藏动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 div{ 11 width: 100px; 12 height: 100px; 13 background: blue; 14 } 15 </style> 16 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 17 <script type="text/javascript"> 18 $(function(){ 19 $("button").eq(0).click(function(){ 20 $("div").show(1000,function(){ 21 alert("显示动画完毕"); 22 }); 23 }); 24 $("button").eq(1).click(function(){ 25 $("div").hide(1000,function(){ 26 alert("隐藏动画完毕"); 27 }); 28 }); 29 $("button").eq(2).click(function(){ 30 $("div").toggle(1000,function(){ 31 alert("切换动画完毕"); 32 }); 33 }); 34 }); 35 </script> 36 </head> 37 <body> 38 <button>显示</button> 39 <button>隐藏</button> 40 <button>切换</button> 41 <div></div> 42 </body> 43 </html>
扫描二维码关注公众号，回复：
6838613 查看本文章
滚动条显示图片
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 img{ 11 width: 400px; 12 display: none; 13 top: 200px; 14 left: 30%; 15 16 position: fixed; 17 box-sizing: border-box; 18 } 19 </style> 20 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 21 <script type="text/javascript"> 22 $(function(){ 23 $(window).scroll(function(){ 24 //获取网页滚动的偏移位 25 var offset = $("html,body").scrollTop(); 26 console.log(offset); 27 //判断网页是否滚动到了指定的位置 28 if(offset >= 500 && offset <= 900){ 29 $("img").show(1000); 30 }else{ 31 //隐藏广告 32 $("img").hide(1000); 33 } 34 }); 35 }); 36 </script> 37 </head> 38 <body> 39 <img src="../img/img-02.jpg"> 40 <br> 41 42 43 </body> 44 </html>
在缓慢弹出中
折叠菜单有展开收起的效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 .nav{ 11 width: 300px; 12 list-style: none; 13 margin: 100px auto; 14 } 15 .nav>li { 16 border: 1px solid black; 17 line-height: 35px; 18 border-bottom: none; 19 text-indent: 2em; 20 position: relative; 21 } 22 .nav>li:last-child{ 23 border-bottom: 1px solid black; 24 border-bottom-right-radius: 10px; 25 border-bottom-left-radius: 10px; 26 } 27 .nav>li:first-child{ 28 border-top-right-radius: 10px; 29 border-top-left-radius: 10px; 30 } 31 .nav>li>span{ 32 background: url("../img/img-02.jpg"); 33 display: inline-block; 34 width: 32px; 35 height: 32px; 36 position: absolute; 37 right: 10px; 38 top: 5px; 39 } 40 .sub{ 41 display: none; 42 } 43 .sub>li { 44 list-style: none; 45 background: mediumpurple; 46 border-bottom: 1px solid black; 47 } 48 .sub>li:hover{ 49 background: red; 50 } 51 /*这个是用来旋转那个箭头的*/ 52 .nav>.current>span{ 53 transform: rotate(90deg); 54 } 55 </style> 56 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 57 <script type="text/javascript"> 58 $(function(){ 59 //监听一级菜单的点击事件 60 $(".nav>li").click(function(){ 61 //拿到二级菜单 62 var $sub = $(this).children(".sub"); 63 //让二级菜单展开 64 $sub.slideDown(1000); 65 //拿到所有非当前的二级菜单 66 var otherSub = $(this).siblings().children(".sub"); 67 //让所有非当前的二级菜单收起 68 otherSub.slideUp(1000); 69 //让被点击的一级菜单的箭头旋转 70 $(this).addClass(".current"); 71 //让所有非被点击的一级菜单的箭头还原 72 $(this).siblings().removeClass(".current"); 73 }); 74 }); 75 76 </script> 77 </head> 78 <body> 79 <ul class="nav"> 80 <li>一级菜单<span></span> 81 <ul class="sub"> 82 <li>二级菜单</li> 83 <li>二级菜单</li> 84 <li>二级菜单</li> 85 <li>二级菜单</li> 86 <li>二级菜单</li> 87 </ul> 88 </li> 89 <li>一级菜单<span></span> 90 <ul class="sub"> 91 <li>二级菜单</li> 92 <li>二级菜单</li> 93 <li>二级菜单</li> 94 <li>二级菜单</li> 95 <li>二级菜单</li> 96 </ul> 97 </li> 98 <li>一级菜单<span></span> 99 <ul class="sub"> 100 <li>二级菜单</li> 101 <li>二级菜单</li> 102 <li>二级菜单</li> 103 <li>二级菜单</li> 104 <li>二级菜单</li> 105 </ul> 106 </li> 107 <li>一级菜单<span></span> 108 <ul class="sub"> 109 <li>二级菜单</li> 110 <li>二级菜单</li> 111 <li>二级菜单</li> 112 <li>二级菜单</li> 113 <li>二级菜单</li> 114 </ul> 115 </li> 116 <li>一级菜单<span></span> 117 <ul class="sub"> 118 <li>二级菜单</li> 119 <li>二级菜单</li> 120 <li>二级菜单</li> 121 <li>二级菜单</li> 122 <li>二级菜单</li> 123 </ul> 124 </li> 125 <li>一级菜单<span></span> 126 <ul class="sub"> 127 <li>二级菜单</li> 128 <li>二级菜单</li> 129 <li>二级菜单</li> 130 <li>二级菜单</li> 131 <li>二级菜单</li> 132 </ul> 133 </li> 134 <li>一级菜单<span></span> 135 <ul class="sub"> 136 <li>二级菜单</li> 137 <li>二级菜单</li> 138 <li>二级菜单</li> 139 <li>二级菜单</li> 140 <li>二级菜单</li> 141 </ul> 142 </li> 143 <li>一级菜单<span></span> 144 <ul class="sub"> 145 <li>二级菜单</li> 146 <li>二级菜单</li> 147 <li>二级菜单</li> 148 <li>二级菜单</li> 149 <li>二级菜单</li> 150 </ul> 151 </li> 152 </ul> 153 154 </body> 155 </html>
弹窗广告
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 .ad{ 11 position: fixed; 12 bottom: 0; 13 right: 0; 14 display: none; 15 } 16 .ad>span{ 17 display: inline-block; 18 width: 30px; 19 height: 30px; 20 position: absolute; 21 top: 0; 22 right: 0; 23 } 24 </style> 25 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 26 <script type="text/javascript"> 27 $(function(){ 28 //监听span的点击事件 29 $("span").click(function(){ 30 $(".ad").remove(); 31 }); 32 33 //执行动画 34 $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000); 35 }); 36 </script> 37 </head> 38 <body> 39 <div class="ad"> 40 <img src="../img/img-02.jpg" width="400px"> 41 <span></span> 42 </div> 43 </body> 44 </html>
自定义动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 div{ 11 width: 100px; 12 height: 100px; 13 margin-top: 10px; 14 background: red; 15 } 16 .two{ 17 background: blue; 18 } 19 </style> 20 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 21 <script type="text/javascript"> 22 /* 23 参数 24 1.接收一个对象，可以在对象中修改属性 25 2.指定动画时长 26 3.指定动画节奏，默认就是swing 27 4.动画执行完毕之后的回调函数 28 */ 29 $(function(){ 30 //操作属性按钮，可以将宽度变为500，或者向右移动500 31 $("button").eq(0).click(function(){ 32 $(".one").animate({ 33 width:500 34 },1000,function(){ 35 alert("自定义动画执行完毕"); 36 }); 37 38 $(".one").animate({ 39 marginLeft:500 40 },5000,function(){ 41 alert("自定义动画执行完毕"); 42 }); 43 $(".two").animate({ 44 marginLeft:500 45 },5000,function(){ 46 alert("自定义动画执行完毕"); 47 }); 48 }); 49 50 //第二个按钮累加属性 51 $("button").eq(1).click(function(){ 52 $(".one").animate({ 53 width:"+=100" 54 },1000,function(){ 55 alert("自定义动画执行完毕"); 56 }); 57 }); 58 59 //第三个按钮切换属性，就是用关键字 60 $("button").eq(2).click(function(){ 61 $(".one").animate({ 62 width:"hide" 63 // width:"toggle" 64 },1000,function(){ 65 alert("自定义动画执行完毕"); 66 }); 67 }); 68 }) 69 </script> 70 </head> 71 <body> 72 <button>操作属性</button> 73 <button>操作属性</button> 74 <button>操作属性</button> 75 <div class="one"></div> 76 <div class="two"></div> 77 </body> 78 </html>
stop和delay方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 .one{ 11 width: 100px; 12 height: 100px; 13 background:red; 14 } 15 .two{ 16 width: 500px; 17 height: 10px; 18 background: blue; 19 } 20 </style> 21 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 22 <script type="text/javascript"> 23 $(function(){ 24 //delay是用来延迟的 25 $("button").eq(0).click(function(){ 26 //可以同时修改多个属性，并且多个属性也可以同时进行 27 $(".one").animate({ 28 width:500 29 },1000).delay(2000).animate({ 30 height:500 31 },1000).animate({ 32 width:10 33 },1000).animate({ 34 height:10 35 },1000) 36 }); 37 38 $("button").eq(1).click(function(){ 39 /*立即停止当前动画，继续执行后续的动画 40 $("div").stop(); 41 $("div").stop(false); 42 $("div").stop(false,false); 43 */ 44 45 /*立即停止当前和后续所有的动画 46 $("div").stop(true); 47 $("div").stop(true,false); 48 */ 49 50 /*立即完成当前的，继续执行后续动画 51 $("div").stop(false,true); 52 */ 53 54 /*立即完成当前的，并且停止后续所有的 55 56 */ 57 $("div").stop(true,true); 58 }); 59 60 }); 61 </script> 62 </head> 63 <body> 64 <button>开始动画</button> 65 <button>停止动画</button> 66 <div class="one"></div> 67 <div class="two"></div> 68 </body> 69 </html>