文 jquery全屏漂浮广告插件，可点击关闭(原创)

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

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

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

在线预览：

http://demo.yanue.net/floatAd/

插件源码：

(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 = "<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>";
            html += "  <a href='" + options.imgJumpToUrl + "' " + _target + "><img src='" + options.imgSrc + "' border='0' class='float_ad_img'/></a> <a href='javascript:;' id='close_float_ad' style=''>x</a>";
            html += "</div>";

        $('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);

调用方法

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="floatAd.js"></script>
	<script type="text/javascript">
		$(function(){
			//调用漂浮插件
			$("body").floatAd({
				imgSrc : 'http://wenwen.soso.com/p/20100204/20100204193850-483274619.jpg',
				url:'http://www.yanue.net'
			});
		})
	</script>