JavaScript:指飘器～（有点“象形名字”的味道，鼠标“指”上去，就“飘”起来了）BTW:顺便帮帮我……有点小麻烦……

开发的过程就不赘诉了，貌似没有必要撒， 大家就自己咬咬牙看一下，注释比我在写一遍要清晰的多……

测试页面： http://eeee6688.blogspot.com/2008/03/blog-post.html（可能需要添加到 hosts文件中(见文章最后)）

在blogspot中是正常的，在cnblogs里面就出现了问题，有点很郁闷……大家也帮我找找原因……

在博客园内需要使用IFRAME才可以，但IFRAME使用起来确实有一定局限性的。希望大家帮忙找找原因……

IFRAME的代码基本如下：

IFRAME SAMPLE
<script language="javascript" type="text/javascript" src="https://files.cnblogs.com/volnet/gocool.js"></script>
<iframe style="width:180px;height:300px;" src="http://localhost:5324/Default.aspx">
</iframe>
<script language="javascript" type="text/javascript"> 
        var floatBaiduHi1 = new floatElement().create('Img1', 'Img2');
</script>

 

样例下载（没法在博客园提供在线查看，简直就是最大的失败）：

https://files.cnblogs.com/volnet/jsOverfloater.rar

============================================================================

闲扯部分……(可PASS)

闲扯
辛勤了一下午写了这么上百行有点乱的代码，都尽量给了注释了，几个浏览器里跑过都算OK，有点小开心，就想发上来和兄弟们分享，结果发现在自己的cnblogs里面居然会出现位置偏移比较离谱的错误。……

针对上面一段文字，做一些简要的自我批评：

原文 = {

/**//*辛勤了一下午写了这么上百行有点乱的代码，都尽量给了注释了，几个浏览器里跑过都算OK，有点小开心，就想发上来和兄弟们分享，结果发现在自己的cnblogs里面居然会出现位置偏移比较离谱的错误。……*/

一下午：(这么点东西要写一下午，真是能够很充分体现猪是怎么死的道理（原理相同）),

有点乱：(给自己找个理由，没怎么严格学过JavaScript，东掰西掰让自己学的不那么纯粹，用起来不那么得心应手，也同时出现了上面的“一下午”这样可悲的关键字。乱也说明了思路不齐，不过经过一些小修小改，还是让下面的代码看起来有那么个骨架子，希望大家不会被我给搞糊涂了。),

尽量：(写完这句话扫描到这个字，这个词倒是和写代码无关系，可是居然用尽量，难道我态度有问题？我会注意的，大家不要批评我 ==! ),

有点小开心：(太容易满足了，特别是当我在写这个博客的时候才觉得自己是多么的愚蠢，居然都不是很好用就沾沾自喜，可耻的小P孩，以后要谨慎谨慎再谨慎),

比较离谱：(今日最大的遗憾莫过于此了，也是标题中的那点“麻烦”，我用的是绝对定位(貌似直接换成相对定位，单页也是OK的)但是在cnblogs里面怎么就错位了，放哪都有问题，十分尴尬。还好blogspot可以，不然今晚都不舍得睡觉了……)

}

附加缺点={

今天发现自己有弥天大缺点，oh，太恐怖了，开着IM工具几乎无法工作了我，写不到20个字母的代码就会去IM光顾一下。刚才回忆了一下，今晚都在跟淘宝卖家调侃了，连人家的为人处世都建议了一通，还有那些可恶的商品，浪费了我足足6个小时……汗，关键是，最可气的是，最后啥也没买就赚了个自我批评的机会了。

}

=======================================================================

/****************************************************************************************
    描述:
    名称：指飘器……（有点“象形名字”的味道，鼠标“指”上去，就“飘”起来了）
    基本功能：用于展示移动鼠标到某元素（通常是IMG元素，也可以是DIV等）上，
                漂浮其上展示另一元素（通常用于展示IMG元素）

    使用方式：
    1.在页面上放置两个元素，并为之设置ID值。
    2.设置类似脚本   
        <script language="javascript" type="text/javascript"> 
            var floatElement1 = new floatElement().create('idParentObj', 'idFloatObj');
        </script>
    3.测试你的元素是否工作正常，如果工作不正常，请将您的html打包发送到我的e-mail.
   
    如果您发现任何异常也麻烦您能够及时告知我。
   
    //Support: IE7.0, FireFox2.0.0.13, Safari3.0.4
    //Not Support: IE8.0Beta1
   
    author: volnet e-mail: volnet@tom.com
    copyright (c) http://volnet.cnblogs.com
    Friday, March 28 by volnet
****************************************************************************************/
function floatElement()
{
    //父对象
    this.parentObj = null;
    //漂浮对象
    this.floatObj = null;
    //偏移量（也指父页面的偏移量）
    this.offset = null;
    //鼠标是否over
    var ismouseover = 'ismouseover';
    //漂浮对象左上位置在父对象的比例（top）
    this.topScale = 1/5;
    //漂浮对象左上位置在父对象的比例（left）
    this.leftScale = 1/5;

    //创建器
    //parentId:父对象的ID
    //floatId:漂浮对象的ID
    //returnValue:图像漂浮器对象
    floatElement.prototype.create = function(parentId, floatId)
    {
        this.parentObj = document.getElementById(parentId);
        this.floatObj = document.getElementById(floatId);
        if(this.parentObj == null || this.floatObj == null)
        {
            //alert('Error: floatElement make mistakes.');
            return null;
        }
       
        this.parentObj.setAttribute(ismouseover,'false');
        this.floatObj.setAttribute(ismouseover,'false');
        this.floatObj.style.display = 'none';
        this.attachEventsPlus(this);
        return this;
    }
    //添加事件
    floatElement.prototype.attachEventsPlus = function(o)
    {
        this.parentObj.onmouseover = function onmouseover(event){o.parentMouseOver();};
        this.parentObj.onmouseout = function onmouseout(event){o.parentMouseOut();};
        this.floatObj.onmouseover = function onmouseover(event){o.floatMouseOver();};
        this.floatObj.onmouseout = function onmouseout(event){o.floatMouseOut();};
    }
    //鼠标第一次移进父对象
    floatElement.prototype.mouseOver = function()
    {
        this.floatObj.style.display = 'block';
        this.setFloatPosition();
    }
    //鼠标是否在其上
    floatElement.prototype.isMouseOver = function()
    {
        return (this.parentObj.getAttribute(ismouseover) == 'true' || this.floatObj.getAttribute(ismouseover) == 'true');
    }
    /**************************************************************/
    //鼠标移到父对象上
    floatElement.prototype.parentMouseOver = function()
    {
        this.parentObj.setAttribute(ismouseover,'true');
        this.mouseOver();
    }
    //鼠标从父对象上移开
    floatElement.prototype.parentMouseOut = function()
    {
        this.parentObj.setAttribute(ismouseover,'false');
        this.floatObj.setAttribute(ismouseover,'true');
        this.exit();
    }
    //鼠标移到漂浮对象上
    floatElement.prototype.floatMouseOver = function()
    {
        this.floatObj.setAttribute(ismouseover,'true');
    }
    //鼠标从漂浮对象上移开
    floatElement.prototype.floatMouseOut = function()
    {
        this.floatObj.setAttribute(ismouseover,'false');
        this.exit();
    }
    /*------------------------------------------------------------*/
    //运行退出
    floatElement.prototype.exit = function()
    {
        if(this.isMouseOver() == false)
            this.floatObj.style.display = 'none';
    }
    //强制退出
    floatElement.prototype.forceExit = function()
    {
        this.floatObj.style.display = 'none';
    }
    //父对象的漂浮左上角位置
    floatElement.prototype.parentLeftTop = function()
    {
        var xy = (this.offset == null) ? getAbsoluteLocation(this.parentObj) : this.offset;
        //alert(xy.absoluteTop + ',' + xy.absoluteLeft  + ',' + xy.offsetWidth  + ',' + xy.offsetHeight);
        return { absoluteTop: (xy.absoluteTop + xy.offsetHeight*this.topScale),
                absoluteLeft: (xy.absoluteLeft + xy.offsetWidth*this.leftScale) };
    }
    //设置漂浮对象的位置
    floatElement.prototype.setFloatPosition = function()
    {
        var pCenter = this.parentLeftTop();
        this.floatObj.style.position = 'absolute';
        this.floatObj.style.top = pCenter.absoluteTop + 'px';
        this.floatObj.style.left = pCenter.absoluteLeft + 'px';
       
        //slowly style!
        this.floatObj.style.width = null;
        this.floatObj.style.height = null;
        var floatObj = this.floatObj;
       
        var paraEffectiveCount = 30;
        var width = this.floatObj.width;
        var height = this.floatObj.height;
       
        var widthIncrement = width/paraEffectiveCount;
        var heightIncrement = height/paraEffectiveCount;
       
        var currentTop = pCenter.absoluteTop;
        var currentLeft = pCenter.absoluteLeft;
        var currentWidth = 0;
        var currentHeight = 0;

        doSlowly();
        function doSlowly()
        {
            currentWidth += widthIncrement;
            currentHeight += heightIncrement;
           
            //边界向导
            var boundaryGuider = checkBoundary(currentLeft,currentTop,currentWidth,currentHeight);
           
            //如果水平方向需要调整
            if(boundaryGuider.necessaryHorizontal==true)
            {
                currentLeft += boundaryGuider.offsetHorizontal;
                floatObj.style.left = currentLeft + 'px';
            }
            //如果垂直方向需要调整
            if(boundaryGuider.necessaryVertical == true)
            {
                currentHeight += boundaryGuider.offsetVertical;
                floatObj.style.top = currentHeight + 'px';
            }

            floatObj.style.width = currentWidth + 'px';
            floatObj.style.height = currentHeight + 'px';
           
            if(width > currentWidth && height > currentHeight)
            {
                setTimeout(doSlowly,1);
            }
            else
            {
                floatObj.style.width = width + 'px';
                floatObj.style.height = height + 'px';
            }
        }
    }
   
    function checkBoundary(currentLeft,currentTop,currentWidth,currentHeight)
    {
        var fAbsoulteRight = currentLeft + currentWidth;
        var fAbsoulteBottom = currentTop + currentHeight;
       
        //<!--http://volnet.cnblogs.com-->
        //Support for: IE7.0, FireFox2.0.0.13, Safari3.0.4
        //Not Support for: IE8.0Beta1
        var browserWidth = Math.max(document.body.clientWidth,640);
        var browserHeight = Math.max(document.body.clientHeight,480);

        var h=0 , v=0;
       
        //水平计算
        if(fAbsoulteRight > browserWidth)
        {
            if((currentLeft + browserWidth - fAbsoulteRight) >= 0)
            {
                h = (browserWidth - fAbsoulteRight);
            }
            else
            {
                h = (0-currentLeft);
            }
        }
        //垂直计算
        if(fAbsoulteBottom > browserHeight)
        {
            if((currentTop + browserHeight - fAbsoulteBottom) >= 0)
            {
                v = (browserHeight - fAbsoulteBottom);
            }
            else
            {
                v = (0-currentTop);
            }
        }
       
        //necessaryHorizontal:是否有必要进行调整，判断条件是窗体宽度比当前浮动宽度要大或者窗体高度比当前浮动高度要大就有必要
        //offsetHorizontal:水平调整的像素，负数为向左，正数为向右。
        return {
            necessaryHorizontal : (h != 0 ),
            offsetHorizontal : h,
            necessaryVertical : (v != 0),
            offsetVertical : v
        }
    }
   
    //获取元素的页面绝对位置
    function getAbsoluteLocation(element)
    {
        if ( arguments.length != 1 || element == null )
        {
            return null;
        }
        var offsetTop = element.offsetTop;
        var offsetLeft = element.offsetLeft;
        var offsetWidth = element.offsetWidth;
        var offsetHeight = element.offsetHeight;
        while( element = element.offsetParent )
        {
            offsetTop += element.offsetTop;
            offsetLeft += element.offsetLeft;
        }
        return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
            offsetWidth: offsetWidth, offsetHeight: offsetHeight };
    }
}   

 

注意：

1.访问blogspot.com网站的方法：

编辑C:\WINDOWS\system32\drivers\etc\ 下的hosts文件，然后加入72.14.219.190 eeee6688.blogspot.com