您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

可关闭的飘窗代码

时间:03-13来源:作者:点击数:
城东书院 www.cdsy.xyz

可关闭的飘窗代码:

<div id="FlAD" style="position:absolute;z-index:10;left:100px;top:100px">
    <p style="color:red;float:right;font-size:12px;cursor:pointer;" onClick="img.style.visibility = 'hidden'">关闭</p>
    <a href="飘窗链接" target="_blank" title="飘窗文字"><img src="飘窗路径" alt="" width="160" border="0" /></a>
</div>
<script type="text/javascript">
    var img = document.getElementById('FlAD');
    var xPos = 200;
    var yPos = 200;
    var step = 1;
    var delay = 40;
    var height = 0;
    var Hoffset = 0;
    var Woffset = 0;
    var yon = 0;
    var xon = 0;
    var pause = true;
    var interval;
    img.style.top = yPos;
    function changePos() {
        width = document.documentElement.clientWidth || document.body.clientWidth;
        height = document.documentElement.clientHeight || document.body.clientHeight;
        scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        scrollTop = document.documentElement.scrollLeft || document.body.scrollTop;
        Hoffset = img.offsetHeight;
        Woffset = img.offsetWidth;
        img.style.left = xPos + scrollLeft +'px';
        img.style.top = yPos + scrollTop +'px';
        if (yon) {
            yPos = yPos + step;
        } else {
            yPos = yPos - step;
        }
        if (yPos < 0) {
            yon = 1;
            yPos = 0;
        }
        if (yPos >= (height - Hoffset)) {
            yon = 0;
            yPos = (height - Hoffset);
        }
        if (xon) {
            xPos = xPos + step;
        } else {
            xPos = xPos - step;
        }
        if (xPos < 0) {
            xon = 1;
            xPos = 0;
        }
        if (xPos >= (width - Woffset)) {
            xon = 0;
            xPos = (width - Woffset);
        }
    }
    function start() {
        img.visibility = "visible";
        interval = setInterval('changePos()', delay);
    }
    start();
</script>
城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门