网页飘窗（找个位置随便放）

曾经终败给现在 2024-04-26 03:37 64阅读 0赞

#### 网页飘窗（找个html代码位置随便放） ####

<style>
        .cloud {
          
            width: 320px;
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 999999;
        }
    
        .cloud_close {
          
            width: 50px;
            height: 15px;
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 12px;
            line-height: 12px;
            color: #fff;
            background-color: #cbc9c9;
            text-align: center;
            cursor: pointer;
        }
    </style>
    <div id="cloud" class="cloud">
        <div id="pc-one" style="position: relative;">
            <div class="cloud_close" onClick="javascript:document.getElementById('cloud').style.display='none';">关闭
            </div>
            <a href="http://www.caa.org.cn/article/192/4514.html" target="_blank"><img
                    src="/${res}/img/zidonghua/chinaZDZW.png" width="320px">
    
        </div>
    </div>
    
    <script>
        $(document).ready(function (e) {
          
    
            /*初始设置*/
            var f_speed = 20; /*漂浮速度*/
            var fi_top = 50, fi_left = 20; /*初始位置：上、左*/
            var $f_cloud = $("#cloud"); /*选定漂浮元素*/
            //var $f_cloud = $(".test");
    
            var f_top = 0, f_left = 0;
            var f_W = $(window).width() - $f_cloud.width();
            var f_H = $(window).height() - $f_cloud.height();
    
            function f_auto() {
          
                if (fi_top >= 0 && fi_top < f_H) {
          
                    fi_top++;
                    f_top = 1 * fi_top;
                } else if (fi_top >= f_H && fi_top < 2 * f_H) {
          
                    fi_top++;
                    f_top = 2 * f_H - fi_top;
                } else {
          
                    fi_top = 0;
                    fi_top++;
                    f_top = 1 * fi_top;
                }
                if (fi_left >= 0 && fi_left < f_W) {
          
                    fi_left++;
                    f_left = 1 * fi_left;
                } else if (fi_left >= f_W && fi_left < 2 * f_W) {
          
                    fi_left++;
                    f_left = 2 * f_W - fi_left;
                } else {
          
                    fi_left = 0;
                    fi_left++;
                    f_left = 1 * fi_left;
                }
                $f_cloud.css({
          top: f_top, left: f_left});
            }
    
            var f_cloud = setInterval(f_auto, f_speed);
            f_auto();
            /*鼠标移入移出*/
            $f_cloud.hover(function () {
          
                clearInterval(f_cloud);
            }, function () {
          
                f_cloud = setInterval(f_auto, f_speed);
            });
            /*自适应屏幕*/
            $(window).resize(function () {
          
                f_W = $(window).width() - $f_cloud.width();
                f_H = $(window).height() - $f_cloud.height();
                f_auto();
            });
    
            var progress = $(".progress"), li_width = $("#b04 li").length;
            var unslider04 = $('#b04').unslider({
          
                    dots: true,
                    complete: function (index) {
          //自己添加的，官方没有
                        progress.animate({
          "width": (100 / li_width) * (index + 1) + "%"});
                    }
                }),
    
                data04 = unslider04.data('unslider');
            $('.unslider-arrow04').click(function () {
          
                var fn = this.className.split(' ')[1];
                data04[fn]();
            });
        });
    </script>