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);[/code]

解决方案 »

  1.   

    你那个 document.writeln（）是写在js当前执行的位置，当前执行的位置在<head></head>里，在<head></head>里的html代码是不会显示的
      

  2.   


    这就是jquery-easyui为啥很多控制都要求有一个宿主标签，比如你要日历控制，得要求有一个<input type="text"/> 的宿主标签，但这个宿主标签实际不会存储日期数据
      

  3.   

    这就是jquery-easyui为啥很多控件都要求有一个宿主标签，比如你要日历控件，得要求有一个<input type="text"/> 的宿主标签，但这个宿主标签实际不会存储日期数据
      

  4.   

    一个到处都是问题的插件。大致的给你改了下，你将那个floatUI换成以下内容吧
    (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);
      

  5.   

    好像还有个对漂浮场景的边界设置是吧
    将上面的：
    var R= $(window).width()-obj.width(); 
    var B =$(window).height()-obj.height(); 修改为：
    var R= $(options.viewStyle==1?window:document).width()-obj.width(); 
    var B=$(options.viewStyle==1?window:document).height()-obj.height(); 
      

  6.   

    我自己改了下 呵呵    (function($){
    $.fn.floatUI = function(options){
    var defaults = {
    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 baseHtml,contentHtml = "<div id=\"ad\" style=\"position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;\">";
    if(options.openStyle == 0){
    baseHtml = contentHtml + "<a href='"+options.imgJumpToUrl+"' target='_blank'><img src='"+options.imgSrc+"' border='0'/></a></div>";
    }else if(options.openStyle == 1){
    baseHtml = contentHtml + "<a href='"+options.imgJumpToUrl+"'><img src='"+options.imgSrc+"' border='0'/></a></div>";
    }
            $("body").append(baseHtml);
            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 pageView = new getBrowseViewSize();
             var R= pageView.pageWidth-obj.offsetWidth; 
                var B = pageView.pageHeight-obj.offsetHeight;
                
                obj.style.left = x + document.body.scrollLeft+"px"; 
                obj.style.top = y + document.body.scrollTop+"px"; 
                
                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 getBrowseViewSize(){
    var pageWidth = window.innerWidth,pageHeight = window.innerHeight;
        if(typeof pageWidth != "number"){
       if(document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
       }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
       }
        } 
        return {
         'pageWidth': pageWidth,
         'pageHeight': pageHeight
        };
    }
      

  7.   

    jquery中关于坐标之类的操作已经很完善了。不需要你这样去做用了jquery，就尽量使用jquery已有的功能去做吧。不是说原生的不好。只是你既然都已经使用了jquery库，没道理不尽量使代码简洁了。对吧我上面给你改的那个。可以保留你预想的功能：viewStyle : 1 这个的设置可以生效的
      

  8.   

    简化版：修正原mouseover和mouseout事件
    (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=\"_floatUI_ad\" style=\"position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;\"></div>");
            _ad.append("<a href='"+options.imgJumpToUrl+"'><img src='"+options.imgSrc+"' border='0'/></a>");
            options.openStyle == 0?_ad.find('a').attr('target','_blank'):null;
            $(this).append(_ad);
            var x = 50,y = 60 ;
            var xin = !0, yin = !0 ;
            var step = 1 ;
            var obj = $("#_floatUI_ad");
            var _float = function(){
                var L = T = 0, 
                R= $(options.viewStyle==1?window:document).width()-obj.width(),
                B=$(options.viewStyle==1?window:document).height()-obj.height(); 
                obj.css({left:x,top:y});
                x = x + step*(xin?1:-1);
                if (x < L) {xin = !0; x = L}; 
                if (x > R){xin = !1; x = R}; 
                
                y = y + step*(yin?1:-1); 
                if (y < T) {yin = !0; y = T}; 
                if (y > B) {yin = !1; y = B}
            }
            var itl = setInterval(_float,options.speed);
            obj.mouseenter(function(){
                clearInterval(itl)
            }).mouseleave(function(){
                itl=setInterval(_float, options.speed)
            });
        };
    })(jQuery);