首先设置一个固定的窗口位于右下角,效果如下:
代码:
jQuery实现广告弹窗.html
之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery实现广告弹窗</title> 6 <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> 7 <style type="text/css" > 8 9 #ad{ 10 300px; 11 height: 300px; 12 background-color: antiquewhite; 13 position: fixed; 14 bottom: 0; 15 right: 0; 16 display: none; 17 } 18 </style> 19 <script type="text/javascript"> 20 21 setTimeout(function(){ 22 $("#ad").show(); 23 24 },3000);//3秒之后就显示 25 26 setTimeout(function(){ 27 $("#ad").hide(); 28 29 },5000);//5秒之后就隐藏 30 31 32 </script> 33 </head> 34 <body> 35 <div id="ad"> 36 <button>关闭</button> 37 38 </div> 39 40 </body> 41 </html>
最后通过代码实现点击事件,最终效果如下:
实现通过代码实现点击事件核心代码:
jQuery:
$(function(){ $("#closeBtn").click(function(){ $("#ad").hide(); }); });
html:
<button id="closeBtn">关闭</button>
最终所有的代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实现广告弹窗</title> <script type="text/javascript" src="js/jquery-3.3.1.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);//3秒之后就显示 setTimeout(function(){ $("#ad").hide(); },5000);//5秒之后就隐藏 $(function(){ $("#closeBtn").click(function(){ $("#ad").hide(); }); }); </script> </head> <body> <div id="ad"> <button id="closeBtn">关闭</button> </div> </body> </html>
通过另一种方式执行点击事件来进行窗口的显示与隐藏:
另一种方式执行点击事件来进行窗口的显示与隐藏的核心代码:
setTimeout(function(){ $("#ad").toggle() },1000); $(function(){ $("#closeBtn").click(function(){ $("#ad").toggle(); }); });
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实现广告弹窗</title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <style type="text/css" > #ad{ 300px; height: 300px; background-color: antiquewhite; position: fixed; bottom: 0; right: 0; display: none; } </style> <script type="text/javascript"> // setTimeout(function(){ // $("#ad").show(); // // },3000);//3秒之后就显示 // // setTimeout(function(){ // $("#ad").hide(); // // },5000);//5秒之后就隐藏 // $(function(){ // $("#closeBtn").click(function(){ // $("#ad").hide(); // }); // }); setTimeout(function(){ $("#ad").toggle() },1000); $(function(){ $("#closeBtn").click(function(){ $("#ad").toggle(); }); }); </script> </head> <body> <div id="ad"> <button id="closeBtn">关闭</button> </div> </body> </html>
当然也可以实现窗口进行动画的显示:
有这样的几个参数:slow fast 毫秒数(速度)
show() //相当于 display:block
第一个参数slow fast 毫秒数(速度)
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示
参数slow的效果:
参数fast比参数slow快,效果如下:
参数 毫秒数(速度)自定义 例如:3秒,效果如下: