jQuery实现广告弹窗

首先设置一个固定的窗口位于右下角,效果如下:

 

 

jQuery实现广告弹窗_第1张图片

 

 

代码:

jQuery实现广告弹窗.html

 

之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下:

jQuery实现广告弹窗_第2张图片

 

 1 
 2 
 3     
 4         
 5         jQuery实现广告弹窗
 6         
 7         
19         
33     
34     
35         
39         
40     
41 
实现3秒自动显示 5秒自动隐藏.html

 

最后通过代码实现点击事件,最终效果如下:

jQuery实现广告弹窗_第3张图片

 

实现通过代码实现点击事件核心代码:

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>
jQuery实现广告弹窗.html

 

通过另一种方式执行点击事件来进行窗口的显示与隐藏:

jQuery实现广告弹窗_第4张图片

另一种方式执行点击事件来进行窗口的显示与隐藏的核心代码:

 setTimeout(function(){
                $("#ad").toggle()
            },1000);
            $(function(){
                $("#closeBtn").click(function(){
                    $("#ad").toggle();
                });
            });


    
        
        jQuery实现广告弹窗
        
        
        
    
    
        
        
    
通过toggle实现弹窗.html

 

当然也可以实现窗口进行动画的显示:

有这样的几个参数:slow fast 毫秒数(速度)

show() //相当于 display:block

第一个参数slow fast  毫秒数(速度)
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示

参数slow的效果:

jQuery实现广告弹窗_第5张图片

 

 参数fast比参数slow快,效果如下:

jQuery实现广告弹窗_第6张图片

 

 参数 毫秒数(速度)自定义 例如:3秒,效果如下:

jQuery实现广告弹窗_第7张图片

 

转载于:https://www.cnblogs.com/jiguiyan/p/10542779.html

你可能感兴趣的:(jQuery实现广告弹窗)