jquery 漂浮广告

来源：互联网发布：tensorflow 验证码识别编辑：程序博客网时间：2024/05/18 03:38

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  <title>漂浮广告</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/ad.css"></link ><link rel="stylesheet" href="css/controls-apple.css" type="text/css"></link>  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/floatingAd.js"></script><script type="text/javascript">$(function(){$.floatingAd({//频率delay: 30,//超链接后是否关闭漂浮isLinkClosed: true,//漂浮内容ad:[{//关闭区域背景透明度(0.1-1)headFilter: 0.3,//图片'img': 'http://c.hiphotos.baidu.com/baike/s%3D200/sign=3309f9afd143ad4ba22e41c0b2025a89/a8014c086e061d95e04133327bf40ad163d9f2d3572cd289.jpg',//图片高度'imgHeight': 220,//图片宽度'imgWidth': 176,//图片链接'linkUrl': 'http://www.baidu.com/',//浮动层级别'z-index': 100,//标题'title': '度娘'}//,//{//'img': 'http://www.97pa.cn/attachments/2010/10/30/119_201010300847251g8jt.gif',//'imgHeight': 220,//'imgWidth': 176,//'linkUrl': 'http://www.163.com/',//'z-index': 101,//'title': '丁三石',//关闭按键图片//'closed-icon': 'http://cdn1.iconfinder.com/data/icons/oxygen/16x16/actions/list-remove.png'//}],//关闭事件onClose: function(elem){alert('关闭');}});});</script>  </head>  <body style="height: 1000px;width: 2000px;">  </body></html>

floatingAd.js

/* *  Description: 漂浮广告 *  Author: jjc *  Date: 2012.07.04 */;(function ( $, window, document, undefined ) {    var pluginName = 'floatingAd';    var defaults = {step: 1,delay: 50, isLinkClosed: false,onClose: function(elem){}    };    var ads = {    linkUrl: '#',    'z-index': '100',    'closed-icon': '',    imgHeight: '',    imgWidth: '',    title: '',    img: '#',    linkWindow: '_blank',    headFilter: 0.2    };    function Plugin(element, options) {        this.element = element;        this.options = $.extend(        {},         defaults,         options,         {        width: $(window).width(),height: $(window).height(),        xPos: this.getRandomNum(0, $(window).width() - $(element).innerWidth()), yPos: this.getRandomNum(0, 300),yOn: this.getRandomNum(0, 1),xOn: this.getRandomNum(0, 1),yPath: this.getRandomNum(0, 1),xPath: this.getRandomNum(0, 1),hOffset: $(element).innerHeight(),wOffset: $(element).innerWidth(),fn: function(){},interval: 0}        );        this._defaults = defaults;        this._name = pluginName;                this.init();    }    Plugin.prototype = {    init: function () {    var elem = $(this.element);    var defaults = this.options;    var p = this;    var xFlag = 0;    var yFlag = 0;        elem.css({"left": defaults.xPos + p.scrollX(), "top": defaults.yPos + p.scrollY()});    defaults.fn = function(){    defaults.width = $(window).width();defaults.height = $(window).height();if(xFlag == p.scrollX() && yFlag == p.scrollY()){elem.css({"left": defaults.xPos + p.scrollX(), "top": defaults.yPos + p.scrollY()});if (defaults.yOn)defaults.yPos = defaults.yPos + defaults.step;elsedefaults.yPos = defaults.yPos - defaults.step;if (defaults.yPos <= 0) {defaults.yOn = 1;defaults.yPos = 0;}if (defaults.yPos >= (defaults.height - defaults.hOffset)) {defaults.yOn = 0;defaults.yPos = (defaults.height - defaults.hOffset);}if (defaults.xOn) defaults.xPos = defaults.xPos + defaults.step;elsedefaults.xPos = defaults.xPos - defaults.step;if (defaults.xPos <= 0) {defaults.xOn = 1;defaults.xPos = 0;}if (defaults.xPos >= (defaults.width - defaults.wOffset)) {defaults.xOn = 0;defaults.xPos = (defaults.width - defaults.wOffset);}}yFlag = $(window).scrollTop();xFlag = $(window).scrollLeft();   };   this.run(elem, defaults);    },    run: function(elem, defaults){    this.start(elem, defaults);    this.adEvent(elem,defaults);    },    start: function(elem, defaults){    elem.find('div.close').hide();    defaults.interval = window.setInterval(defaults.fn,  defaults.delay);    window.setTimeout(function(){elem.show();}, defaults.delay);    },    getRandomNum: function (Min, Max){  var Range = Max - Min;  var Rand = Math.random();  return(Min + Math.round(Rand * Range));  },getPath: function(on){return on ? 0 : 1;},clear: function(elem, defaults){elem.find('div.close').show();window.clearInterval(defaults.interval);},close: function(elem, defaults, isClose){elem.unbind('hover');  elem.hide();  if(isClose)defaults.onClose.call(elem);},adEvent: function(elem, defaults){var obj = {elem: this,  fn_close: function() {   this.elem.close(elem, defaults, true);  },  fn_clear: function() {  if(this.elem.options.isLinkClosed)  this.elem.close(elem, defaults, false);  }};    elem.find('div.button').bind('click', jQuery.proxy(obj, "fn_close"));        elem.find('a').bind('click', jQuery.proxy(obj, "fn_clear"));        var stop = {elem: this,  over: function(){    this.elem.clear(elem, defaults);  },  out: function(){this.elem.start(elem, defaults);  }};        elem.hover(    jQuery.proxy(stop, "over"),jQuery.proxy(stop, "out"));},scrollX: function(){var de = document.documentElement;return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;},scrollY: function(){var de = document.documentElement;return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;}};    $.fn.floatingAd = function(options) {        return this.children("div").each(function (i, elem) {            if (!$.data(this, 'plugin_' + pluginName)) {                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));            }        });    };$.floatingAd = function(options){if(options){    if(options.ad){    var adDiv = $('#' + pluginName);        if(adDiv.length <= 0)    adDiv = $('<div>', {    'id': pluginName,    'class': pluginName    }).appendTo('body');        for(var i in options.ad){        var ad = options.ad[i];    ad = $.extend({}, ads, ad);    //漂浮层    var div = $('<div>', {    'class': 'ad'    });        div.css("z-index", ad['z-index']);        //关闭层    var closeDiv = $('<div>', {    'class': 'close'    });    $('<div>', {    'class': 'opacity',    'style': 'opacity: ' + ad.headFilter + ';filter: alpha(opacity = ' + ad.headFilter*100 + ');'    }).appendTo(closeDiv);        $('<div>', {    'class': 'text'    }).append(    $('<div>', {    'class': 'title',    'text': ad.title    })    ).append(    $('<div>', {    'class': 'button',    'style': ad['closed-icon'] ? 'background:url("' + ad['closed-icon'] + '") no-repeat;' : ''    })    ).appendTo(closeDiv);        closeDiv.appendTo(div);        //内容层    var content = $('<div>');        $('<a>', {    href: ad.linkUrl,    target: ad.linkWindow,    title: ad.title    }).append(    $('<img>', {    'src': ad.img,    'style': (ad.imgHeight ? 'height:' + ad.imgHeight + 'px;' : '') +              (ad.imgWidth ? 'width:' + ad.imgWidth + 'px;' : '')    })    ).appendTo(content);        content.appendTo(div);        div.appendTo(adDiv);    }    delete options.ad;    $('#' + pluginName).floatingAd(options);    }    } else      $.error('漂浮广告错误!');};})(jQuery, window, document);