文章目录

• • jquery全屏漂浮广告插件 兼容主流浏览器 实现非常简单
  • 插件源码：
  • 调用方法

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

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

在线预览：

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

插件源码：

(function($){\n	$.fn.floatAd = function(options){\n		var defaults = {\n			imgSrc : "http://wenwen.soso.com/p/20100204/20100204193850-483274619.jpg", //漂浮图片路径\n			url : "http://map.yanue.net", //图片点击跳转页\n			openStyle : 1, //跳转页打开方式 1为新页面打开  0为当前页打开\n			speed : 10 //漂浮速度 单位毫秒\n		};\n		var options = $.extend(defaults,options);\n		var _target = options.openStyle == 1 ?  "target='_blank'" : '' ;\n		var html = "<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>";\n            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>";\n            html += "</div>";\n\n        $('body').append(html);\n\n		function init(){\n			var x = 0,y = 0 \n			var xin = true, yin = true \n			var step = 1 \n			var delay = 10 \n			var obj=$("#float_ad") \n			obj.find('img.float_ad_img').load(function(){\n				var float = function(){\n				    var L = T = 0;\n					var OW = obj.width();//当前广告的宽\n					var OH = obj.height();//高\n					var DW = $(document).width(); //浏览器窗口的宽\n					var DH = $(document).height(); \n\n 				    x = x + step *( xin ? 1 : -1 ); \n					if (x < L) { \n						xin = true; x = L\n					} \n					if (x > DW-OW-1){//-1为了ie\n						xin = false; x = DW-OW-1\n					} \n\n					y = y + step * ( yin ? 1 : -1 ); \n					if (y > DH-OH-1) { \n\n						yin = false; y = DH-OH-1 ;\n					}\n					if (y < T) {\n						yin = true; y = T\n					} \n\n					var left = x ; \n					var top = y; \n\n					obj.css({'top':top,'left':left});\n				}\n				var itl = setInterval(float,options.speed);\n				$('#float_ad').mouseover(function(){clearInterval(itl)}); \n				$('#float_ad').mouseout(function(){itl=setInterval(float, options.speed)} )\n			});\n			// 点击关闭\n			$('#close_float_ad').live('click',function(){\n			    $('#float_ad').hide();\n			});\n		}\n\n	   init();\n\n	}; //floatAd\n\n})(jQuery);

调用方法

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