jquery 插件 找了很久不知道为什么
写了个漂浮的jquery插件 ,不知道为何在IE下无效果,觉得也不是兼容的问题 望大神有时间看一下为何
index.html 需修改ｊｑｕｅｒｙ源码与ｆｌｏａｔＵＩ．ｊｓ的路径
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Float</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/floatUI.js"></script> <script type="text/javascript"> $(function(){ //调用漂浮插件 $("body").floatUI({ openStyle : 0, speed : 10 }); }) </script> </head> <body> </body></html>还有一个ｊｓ插件 [code=JScript] (function($){ $.fn.floatUI = function(options){ var defaults = { viewStyle : 1 , //漂浮浏览区域 1 用户可视范围(浏览器可视范围) 2 浏览器全部范围(包含滚动部分) imgSrc : "http://wenwen.soso.com/p/20100204/20100204193850-483274619.jpg", //漂浮图片路径 imgJumpToUrl : "http://www.baidu.com", //图片点击跳转页 openStyle : 0, //跳转页打开方式 0为新页面打开 1为当前页打开 speed : 10 //漂浮速度 单位毫秒 }; var options = $.extend(defaults,options); document.writeln("<div id=\"ad\" style=\"position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;\">"); var baseHtml; if(options.openStyle == 0){ baseHtml = "<a href='"+options.imgJumpToUrl+"' target='_blank'><img src='"+options.imgSrc+"' border='0'/></a>"; document.write(baseHtml); }else if(options.openStyle == 1){ baseHtml = "<a href='"+options.imgJumpToUrl+"'><img src='"+options.imgSrc+"' border='0'/></a>"; document.write(baseHtml); } document.write('</div>'); // $("body").html('<div id=\"ad\" style=\"position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;\"><a href="#"><img src="http://wenwen.soso.com/p/20100204/20100204193850-483274619.jpg" border="0"/></a></div>'); if(document.getElementById("ad")){ var x = 50,y = 60 ; var xin = true, yin = true ; var step = 1 ; var obj = document.getElementById("ad"); var float = function(){ var L = T = 0; var R= document.body.clientWidth-obj.offsetWidth; var B = document.body.clientHeight-obj.offsetHeight; obj.style.left = x + document.body.scrollLeft; obj.style.top = y + document.body.scrollTop; x = x + step*(xin?1:-1); if (x < L) { xin = true; x = L } if (x > R){ xin = false; x = R } y = y + step*(yin?1:-1); if (y < T) { yin = true; y = T } if (y > B) { yin = false; y = B } } var itl = setInterval(float,options.speed); } obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval(float, options.speed)} }; //floatUI})(jQuery);
(function($){ $.fn.floatUI = function(options){ var defaults = { viewStyle : 1 , //漂浮浏览区域 1 用户可视范围(浏览器可视范围) 2 浏览器全部范围(包含滚动部分) imgSrc : "http://wenwen.soso.com/p/20100204/20100204193850-483274619.jpg", //漂浮图片路径 imgJumpToUrl : "http://www.baidu.com", //图片点击跳转页 openStyle : 0, //跳转页打开方式 0为新页面打开 1为当前页打开 speed : 10 //漂浮速度 单位毫秒 }; var options = $.extend(defaults,options); var _ad=$("<div id=\"ad\" style=\"position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;\"></div>"); var baseHtml; if(options.openStyle == 0){ baseHtml = "<a href='"+options.imgJumpToUrl+"' target='_blank'><img src='"+options.imgSrc+"' border='0'/></a>"; _ad.append(baseHtml); }else if(options.openStyle == 1){ baseHtml = "<a href='"+options.imgJumpToUrl+"'><img src='"+options.imgSrc+"' border='0'/></a>"; _ad.append(baseHtml); } $(this).append(_ad); if(document.getElementById("ad")){ var x = 50,y = 60 ; var xin = true, yin = true ; var step = 1 ; var obj = $("#ad"); var _float = function(){ var L = T = 0; var R= $(window).width()-obj.width(); var B =$(window).height()-obj.height(); obj.css({left:x,top:y}); x = x + step*(xin?1:-1); if (x < L) { xin = true; x = L } if (x > R){ xin = false; x = R } y = y + step*(yin?1:-1); if (y < T) { yin = true; y = T } if (y > B) { yin = false; y = B } } var itl = setInterval(_float,options.speed); } obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval(_float, options.speed)} };})(jQuery);
[解决办法]
好像还有个对漂浮场景的边界设置是吧
将上面的：
var R= $(window).width()-obj.width(); var B =$(window).height()-obj.height();
[解决办法]
jquery中关于坐标之类的操作已经很完善了。不需要你这样去做
用了jquery，就尽量使用jquery已有的功能去做吧。不是说原生的不好。只是你既然都已经使用了jquery库，没道理不尽量使代码简洁了。对吧
我上面给你改的那个。可以保留你预想的功能：viewStyle : 1 这个的设置可以生效的