码迷,mamicode.com
首页 > Web开发 > 详细

基于JQuery网页漂浮广告窗口Js详解

时间:2018-01-06 14:24:13      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:article   float   get   方向   alt   http   html   页面   cli   

转载自:http://blog.csdn.net/u011427035/article/details/51072116

浮窗Css样式

<style>  
        .floadAd { position: absolute;z-index: 999900; display: none; }  
        .floadAd .item { display: block; }  
        .floadAd .item img { vertical-align: bottom; }/* a img 的组合浏览器默认下边会有几个像素的空白,这里可以消除空白*/  
</style>  

html内容自己写

<div id="floadAD" class="floadAd">  
    <a class="close" href="javascript:void();" style="color: red">×关闭</a>  
    <a class="item" title=‘首届党建文化节‘ href="http://unsun.net" target="_blank">  
        <img src="App_UpLoad/image/20160405/20160405172215_2907.png" alt="首届党建文化节" /></a>  
</div>  

 Js代码

//广告漂浮窗口  
function FloatAd(selector) {  
    var obj = $(selector);  
    if (obj.find(".item").length == 0) return;//如果没有内容,不执行  
    var windowHeight = $(window).height();//浏览器高度  
    var windowWidth = $(window).width();//浏览器宽度  
    var dirX = -1.5;//每次水平漂浮方向及距离(单位:px),正数向右,负数向左,如果越大的话就会看起来越不流畅,但在某些需求下你可能会需要这种效果  
    var dirY = -1;//每次垂直漂浮方向及距离(单位:px),正数向下,负数向上,如果越大的话就会看起来越不流畅,但在某些需求下你可能会需要这种效果  
                  
    var delay = 30;//定期执行的时间间隔,单位毫秒  
    obj.css({ left: windowWidth / 2 - obj.width() / 2 + "px", top: windowHeight / 2 - obj.height() / 2 + "px" });//把元素设置成在页面中间  
    obj.show();//元素默认是隐藏的,避免上一句代码改变位置视觉突兀,改变位置后再显示出来  
    var handler = setInterval(move, delay);//定期执行,返回一个值,这个值可以用来取消定期执行  
                  
    obj.hover(function() {//鼠标经过时暂停,离开时继续  
        clearInterval(handler);//取消定期执行  
    }, function() {  
        handler = setInterval(move, delay);  
    });  
  
    obj.find(".close").click(function() {//绑定关闭按钮事件  
        close();  
    });  
    $(window).resize(function() {//当改变窗口大小时,重新获取浏览器大小,以保证不会过界(飘出浏览器可视范围)或漂的范围小于新的大小  
        windowHeight = $(window).height();//浏览器高度  
        windowWidth = $(window).width();//浏览器宽度  
    });  
    function move() {//定期执行的函数,使元素移动  
        var currentPos = obj.position();//获取当前位置,这是JQuery的函数,具体见:http://hemin.cn/jq/position.html  
        var nextPosX = currentPos.left + dirX;//下一个水平位置  
        var nextPosY = currentPos.top + dirY;//下一个垂直位置  
                      
        if (nextPosX >= windowWidth - obj.width()) {//这一段是本站特有的需求,当漂浮到右边时关闭漂浮窗口,如不需要可删除  
            close();  
        }  
  
        if (nextPosX <= 0 || nextPosX >= windowWidth - obj.width()) {//如果达到左边,或者达到右边,则改变为相反方向  
            dirX = dirX * -1;//改变方向  
            nextPosX = currentPos.left + dirX;//为了不过界,重新获取下一个位置  
        }  
        if (nextPosY <= 0 || nextPosY >= windowHeight - obj.height() - 5) {//如果达到上边,或者达到下边,则改变为相反方向。              
            dirY = dirY * -1;//改变方向  
            nextPosY = currentPos.top + dirY;//为了不过界,重新获取下一个位置  
        }  
        obj.css({ left: nextPosX + "px", top: nextPosY + "px" });//移动到下一个位置  
    }  
  
    function close() {//停止漂浮,并销毁漂浮窗口  
        clearInterval(handler);  
        obj.remove();  
    }  
}  

 调用:

FloatAd("#floadAD");//调用  

 

基于JQuery网页漂浮广告窗口Js详解

标签:article   float   get   方向   alt   http   html   页面   cli   

原文地址:https://www.cnblogs.com/fudou/p/8213786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!