jquery全屏漂浮广告插件 兼容主流浏览器 实现简单 调用简单 在线预览 源码下载

jquery全屏漂浮广告插件 兼容主流浏览器 实现非常简单

说明：jquery在1.9开始不支持.live()方法的写法而改用.on()，见http://jquery.com/upgrade-guide/1.9/#live-removed.该插件中关闭图片链接使用了.live().请根据自己情况自行修改.

在线预览：

插件源码：(function($){

$.fn.floatAd = function(options){

var defaults = {

imgSrc : "http://wenwen.soso.com/p/20100204/20100204193850-483274619.jpg", //漂浮图片路径

url : "http://map.yanue.net", //图片点击跳转页

openStyle : 1, //跳转页打开方式 1为新页面打开 0为当前页打开

speed : 10 //漂浮速度 单位毫秒

};

var options = $.extend(defaults,options);

var _target = options.openStyle == 1 ? "target='_blank'" : '' ;

var html = "

";

$('body').append(html);

function init(){

var x = 0,y = 0

var xin = true, yin = true

var step = 1

var delay = 10

var obj=$("#float_ad")

obj.find('img.float_ad_img').load(function(){

var float = function(){

var L = T = 0;

var OW = obj.width();//当前广告的宽

var OH = obj.height();//高

var DW = $(document).width(); //浏览器窗口的宽

var DH = $(document).height();

x = x + step *( xin ? 1 : -1 );

if (x < L) {

xin = true; x = L

}

if (x > DW-OW-1){//-1为了ie

xin = false; x = DW-OW-1

}

y = y + step * ( yin ? 1 : -1 );

if (y > DH-OH-1) {

yin = false; y = DH-OH-1 ;

}

if (y < T) {

yin = true; y = T

}

var left = x ;

var top = y;

obj.css({'top':top,'left':left});

}

var itl = setInterval(float,options.speed);

$('#float_ad').mouseover(function(){clearInterval(itl)});

$('#float_ad').mouseout(function(){itl=setInterval(float, options.speed)} )

});

// 点击关闭

$('#close_float_ad').live('click',function(){

$('#float_ad').hide();

});

}

init();

}; //floatAd

})(jQuery);

调用方法

$(function(){

//调用漂浮插件

$("body").floatAd({

imgSrc : 'http://wenwen.soso.com/p/20100204/20100204193850-483274619.jpg',

url:'http://www.yanue.net'

});

})