JQuery动态漂浮广告

时间:2022-05-28 lyh_0301 人气:0
JQuery实现动态漂浮广告&全局窗口，供大家参考，具体内容如下
以下是效果图及实现代码：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漂浮广告栏</title>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <style type="text/css">
        body{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #floatdiv{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fbb;
            z-index: 999;
            border: 1px solid #ccc;
            border-radius: 10px 10px ;
        }
        span{
            position: absolute;
            top: 0;
            right: 0;
            color: darksalmon;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 0 5px;
            cursor: pointer;
            border-radius: 20% 20%;
        }
    </style>
    
</head>
<body>
<div id="floatdiv">
    <span id="Clickclose" >X</span>
    <p>鼠标悬停！</p>    
    <p>点击关闭！</p>    
</div>

<script type="text/javascript">
        var isinter;
        var millisec = 30;//定时器间隔执行时间/毫秒
        var xfloat = 0; //漂浮层x坐标
        var yfloat = 0; //漂浮层y坐标
        var yistop = false;
        var xisleft = true;
        function floatanimation(){
        var    visiblewidth = $(window).width();//可视区域宽度
        var    visibleheight = $(window).height();//可视区域高度
 
        var    divwidth = $('#floatdiv').width();//div漂浮层宽度
        var divheight = $('#floatdiv').height();//div漂浮层高度
 
        var hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度
        var wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离
 
        var offwidth = (visiblewidth-divwidth);//div偏移的宽度
        var offheight = (visibleheight-divheight);//div偏移的高度
 
            if (!yistop) {
                yfloat++;
                if (yfloat >= offheight) {
                    yistop = true;
                }
            } else {
                yfloat--;
                if (yfloat <= 0) {
                    yistop = false;
                }
            }
 
            if (xisleft) {
                xfloat++;
                if (xfloat >= offwidth) {
                    xisleft = false;
                }
            } else {
                xfloat--;
                if (xfloat <= 0) {
                    xisleft = true;
                }
            }
         /* 如果使用固定定位，请把加上滚动条的距离去掉即可 */
            $('#floatdiv').css({'top':yfloat+hstop,'left':xfloat+wsleft});
        }
 
        $(function () {
            isinter = setInterval("floatanimation()",millisec);
            $('#floatdiv').mouseover(function () {
                clearInterval(isinter);
            }).mouseout(function () {
                isinter = setInterval("floatanimation()",millisec);
            });
            $('#Clickclose').click(function () {
                $(this).parents("#floatdiv").slideUp(500,function(){
                    clearInterval(isinter);
                    $(this).remove();
                });
            });
        });
    </script>
</body>
</html>
加载全部内容