一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color: rgb(211, 112, 112); display: none; } </style> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> $(function(){ $('button').eq(0).click(function(){ $('div').show(1000,function(){ //1000是一秒 一秒执行完 //作用:动画执行完毕后调用 alert('显示动画执行完毕') }) }) $("button").eq(1).click(function(){ $('div').hide(1000,function(){ alert('显示动画隐藏完毕'); }) }) $('button').eq(2).click(function(){ $('div').toggle(1000); }) }) </script> </head> <body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> </body> </html>
二:对联广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .left{ position: fixed; top: 200px; left: 0px; } .right{ position: fixed; top: 200px; right: 0px; } img{ display: none; } </style> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> $(function(){ //注意选择器用逗号相隔 兼容浏览器需要body和html都获取元素 //监听网页的滚动 $(window).scroll(function(){ //获取网页滚动的偏移位 var loc=$('html,body').scrollTop(); //判断网页是否滚动到了指定的位置 if(loc>=500){ $('img').show(1000); }else{ $('img').hide(1000); } }) }) </script> </head> <body> <img src="https://ww2.sinaimg.cn/bmiddle/005XXgyGly1g80ybc0o1dj30hs1fxdk6.jpg" alt="" class="left" style="width: 100px;height: 250px;"> <img src="https://ww2.sinaimg.cn/bmiddle/005XXgyGly1g80ybc0o1dj30hs1fxdk6.jpg" alt="" class="right" style="width: 100px;height: 250px;"> <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> <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> <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> <br> <br> <br> <br> </body> </html>