【前端常用功能效果】jq封装飘窗；全屏飘窗或者区域内飘窗都可以

原创已于 2024-04-25 14:17:17 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #css3 #javascript #jquery #css

于 2024-04-03 09:01:13 首次发布

本文介绍了如何使用HTML和JavaScript创建动态飘窗功能，包括使用pcFz.js库对飘窗进行样式设置、内容切换和位置控制，以及利用CSS和jQuery处理滚动事件和鼠标悬停效果。

一：html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>飘窗js封装</title>
        <link rel="stylesheet" type="text/css" href="css/public.css"/>
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <script type="text/javascript" src="js/pcFz.js" ></script>
        <style type="text/css">
            body {
                height:100%;
                position:relative;
            }
            .pcFz {
                width:500px;
                height:300px;
                border:4px solid red;
                border-radius:5px;
                overflow:hidden;
                top:10px;
                left:40px;
                z-index:999;
            }
            .pcFz1 {
                width:500px;
                height:300px;
                border:4px solid red;
                border-radius:5px;
                overflow:hidden;
                position:absolute;
                top:10px;
                left:40px;
                z-index:999;
            }
            .pcFz1 div {
                height:300px;
                line-height:300px;
                color:red;
                font-size:50px;
                text-align:center;
            }
            .pcFz div {
                height:300px;
                line-height:300px;
                color:red;
                font-size:50px;
                text-align:center;
            }
            .pcFz img {
                width:100%;
            }
            .pcFz1 img {
                width:100%;
            }
            .box {
                width:1000px;
                height:450px;
                border:6px solid black;
                margin:10px auto;
                position:relative;
            }
        </style>
    </head>
    <body>
        <!--飘窗 S-->
            <div class="pcFz"><div>我是飘窗</div></div>
            <div class="box"><div class="pcFz1"><div>我是飘窗</div></div></div>
        <!--飘窗 E-->
        <!--飘窗中的内容 S-->
            <div class="whbs" style="display:none;"><div style="background:aqua;">奥特曼一号</div></div>
            <div class="kwbs" style="display:none;"><div style="background:blue;">奥特曼二号</div></div>
            <div class="yjbs" style="display:none;"><div style="background:black;">奥特曼三号</div></div>
            <div class="zjbs" style="display:none;"><div style="background:aquamarine;">最后一个奥特曼</div></div>
        <!--飘窗中的内容 E-->
        <!--飘窗中的内容 S-->
            <div class="whbs1" style="display:none;"><img src="img/timg.jpg"/></div>
            <div class="kwbs1" style="display:none;"><img src="img/timg1.jpg"/></div>
            <div class="yjbs1" style="display:none;"><img src="img/timg2.jpg"/></div>
            <div class="zjbs1" style="display:none;"><img src="img/u=918034903,1545014645&fm=27&gp=0.jpg"/></div>
    </body>
</html>

二：封装飘窗 pcFz.js;

$(function(){
    var whbs = $(".whbs").html();
    var kwbs = $(".kwbs").html();
    var yjbs = $(".yjbs").html();
    var zjbs = $(".zjbs").html();
    var whbs1 = $(".whbs1").html();
    var kwbs1 = $(".kwbs1").html();
    var yjbs1 = $(".yjbs1").html();
    var zjbs1 = $(".zjbs1").html();

//全局飘窗
    $(window).pcFz({Array:[whbs1,kwbs1,yjbs1,zjbs1],pcObj:".pcFz",X:1,Y:1,interval:10}); 

//div区域内飘窗
    $(".box").pcFz({Array:[whbs,kwbs,yjbs,zjbs],pcObj:".pcFz1",X:1,Y:1,interval:20});
    
    
});

/*************飘窗js封装*******************/
//全屏飘动调取方法：$(window).pcFz({Array:[],pcObj:".pcFz",X:1,Y:1,interval:10});duanqiang on 2017/10/24.
//在固定区域内飘动调取方法：$("飘动区域的class名或者id名").pcFz({Array:[],pcObj:".pcFz1",X:1,Y:1,interval:10});
(function($){
    $.fn.pcFz = function(A){
            A = jQuery.extend({
                Array : [],     //存放变换的内容可以不用放值。
                pcObj : "",    //飘窗对象class名或者id名。
                   X  : 1,    //x一次走的距离。
                   Y  : 1,   //Y轴一次走的距离。
             interval : 10 //定时器的时间。
            },A);
        this.each(function(){
            var    $this   = $(this),
                Owidth  = $(A.pcObj).outerWidth(),   //飘窗的宽度。
                Oheight = $(A.pcObj).outerHeight(), //飘窗的高度。
                $scoLeft= $(window).scrollLeft(),  //滚动条左侧的距离出现横向滚动条才能用到。
                $scoTop = $(window).scrollTop(),  //滚动条顶部的距离出现竖向滚动条才能用到。
                $width  = $this.width(),         //飘窗外层可飘动的区域宽度。
                $height = $this.height(),       //飘窗外层可飘动的区域高度。
                time    = null,                //定时器。
                Number  = 0,                  //按顺序改变内容时用到的变量。
                pcX     = null,
                pcY     = null,
                left    = null,
                top     = null,
                disX    = null,
                disY    = null;
               if($this.is($(window))){  //全屏飘动走的方法。duanqiang on 2017/10/24.
                   pcX = $(A.pcObj).offset().left-$scoLeft,
                pcY = $(A.pcObj).offset().top-$scoTop;
                   $(window).on("resize",function(){ //监控窗口大小，改变可飘动的范围。
                    $width  = $this.width();
                    $height = $this.height();
                });
                $(window).on("scroll",function(){ //监控滚动条事件，防止滚动滚动条时飘窗飞出页面。
                    $scoLeft= $(window).scrollLeft();
                    $scoTop = $(window).scrollTop();
                    pcX = $(A.pcObj).offset().left-$scoLeft;
                    pcY = $(A.pcObj).offset().top-$scoTop;
                 });
               }else{  //飘动外层有限制框走的方法。
                   pcX  = $(A.pcObj).offset().left,
                pcY  = $(A.pcObj).offset().top,
                left = $this.offset().left,
                top  = $this.offset().top,
                disX = pcX - left,
                disY = pcY - top;
               }
            function B(){
                pcX  += A.X;
                pcY  += A.Y;
                disX += A.X;
                disY += A.Y;
                if(Number > A.Array.length){ //循环变换的内容下标
                    Number = 0;
                };
                var num = parseInt(Math.random()*A.Array.length);//随机下标，随机改变内容时用到的下标变量。
                if($this.is($(window))){  //全屏飘动走的方法
                    if(pcX > $width-Owidth || pcX<=0){
                        A.X *= -1;
                        $(A.pcObj).html(A.Array[Number]);
                        Number++
                    };
                    if(pcY> $height-Oheight || pcY<=0){
                        A.Y *= -1;
                        $(A.pcObj).html(A.Array[Number]);
                        Number++
                    };
                    $(A.pcObj).css({
                        "position":"fixed",
                           "left"    : pcX + "px",
                           "top"     : pcY + "px"
                    });
                }else{   // 在某个区域内飘动走的方法。
                    if(disX > $width-Owidth || disX<=0){
                        A.X *= -1;
                        $(A.pcObj).html(A.Array[num]);
                        Number++
                    };
                    if(disY> $height-Oheight || disY<=0){
                        A.Y *= -1;
                        $(A.pcObj).html(A.Array[num]);
                        Number++
                    };
                    $(A.pcObj).css({
                        "position":"absolute",
                           "left"    : disX + "px",
                           "top"     : disY + "px"
                    });
                };            
            };
            function C(){
                time=setInterval(B,A.interval);
            };
            function D(){
                clearInterval(time);
            };
            $(A.pcObj).hover(D,C).mouseout();//滑过暂停移除飘动。
        });
    };
})(jQuery);