求一个页面悬浮框

http://www.chhblog.com/Web/DemoView.aspx?DemoID=11

jquery thinkbox 插件
http://jquery.com/demo/thickbox/
http://www.21andy.com/blog/20071222/765.html

csdn的论坛网页的两边不天天挂着一副悬浮的框吗

http://ad.jz123.cn/ad/02/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>漂浮广告</title>
        <script src="jquery-1.5.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){//下面的代码放在这个匿名函数里面，不会引起命名冲突
                var x = 0,y = 0;//控制起始位置
                var xin = true, yin = true;//从左上向右下即初始状态为左侧和上侧碰撞
                var step = 1;//控制速度
                var delay = 15;//控制帧率
                var objOfFloatAd = $('#only_one_floatAd');//漂浮对象
var closeOfFloatAd = $('#close_floatAd');//关闭按钮
var Timer= setTimeout(adFloat, delay);
                function adFloat() {
var L = T = 0;
var R = $(window).width() - objOfFloatAd.width();
var B = $(window).height() - objOfFloatAd.height();
                    objOfFloatAd.css('left', x + $(document).scrollLeft());
                    objOfFloatAd.css('top', y + $(document).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;
                    }
Timer= setTimeout(adFloat, delay);
                }
                objOfFloatAd.hover(
function(){
closeOfFloatAd.show();//鼠标浮动在ad上时显示关闭按钮
                     clearTimeout(Timer);
                 },
                  function(){
closeOfFloatAd.hide();//鼠标移出ad时隐藏关闭按钮
clearTimeout(Timer);
                     Timer = setTimeout(adFloat, delay);
                 }
);
$('#close_floatAd').click(function(){
objOfFloatAd.hide();
clearTimeout(Timer);
});
            });
        </script>
    </head>
    <body>
        <div style="height:1000px;"></div>
        <div id="only_one_floatAd" style="position:absolute">
            <a href="http://hd2000.jiaoyu.139.com/" target="_blank"><img width="300" height="250" src="焦点图-300X250.jpg" alt="中国移动校讯通杯第十三届全国中小学电脑制作活动火热进行中" border="0"></a>
            <span id="close_floatAd" style="display:none;position:absolute;right:0;top:0;font-family:Arial, Helvetica, sans-serif;color:#ff0000;cursor:default;padding:3px;">X</span>
        </div>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        body {font-family:Arial;font-size:12px;}
    </style>
    <title>简单的文件树效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        var floater = function (options) {
            var othis = this;
            this.gap = 5;
            this.imgLeftPath = options.images[0];
            this.imgRightPath = options.images[1];
            this.hrefLeft = options.hrefs[0];
            this.hrefRight = options.hrefs[1];
            this.isClose = options.isClose;
            this.width = options.width ? options.width : 100;
            this.height = options.width ? options.height : 500;
            window.onscroll = function () {
                othis.getScroll.apply(othis, null);
            }
            this.init();        }
        floater.prototype.init = function () {
            this.floaterLeft = document.createElement("div");
            this.floaterLeft.style.backgroundColor = "transparent";
            this.floaterLeft.style.width = this.width + "px";
            this.floaterLeft.style.position = "absolute";
            this.floaterLeft.style.left =this.gap+ "px";
            this.aLeft = document.createElement("a");
            this.aLeft.href = this.hrefLeft;
            this.aLeft.target = "_blank";
            this.imgLeft = document.createElement("img");
            this.imgLeft.style.height = this.height + "px";
            this.imgLeft.style.width = this.width + "px";
            this.imgLeft.style.borderWidth = "0px";
            this.imgLeft.src = this.imgLeftPath;
            if (this.isClose) {
                var btnClose = document.createElement("a");
                btnClose.style.cursor = "pointer";
                btnClose.style.textDecoration = "none";
                btnClose.innerHTML = "[Close]";
                btnClose.style.cssFloat = "right";
                btnClose.style.styleFloat = "right";
                btnClose.onclick = this.close;
                this.floaterLeft.appendChild(btnClose);
            }
            this.aLeft.appendChild(this.imgLeft);
            this.floaterLeft.appendChild(this.aLeft);
            document.body.appendChild(this.floaterLeft);
            this.floaterLeft.style.top = (document.documentElement.clientHeight - this.floaterLeft.offsetHeight) / 2 + "px";
            this.cloneRight();
        }        floater.prototype.cloneRight = function () {
            this.floaterRight = this.floaterLeft.cloneNode(true);
            this.floaterRight.style.left = "";
            this.floaterRight.style.right = this.gap + "px";
            var arr = this.floaterRight.getElementsByTagName("a");
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].href) {
                    arr[i].href = this.hrefRight;
                }
                else if (arr[i].innerHTML == "[Close]") {
                    arr[i].style.cssFloat = "left";
                    arr[i].style.styleFloat = "left";
                    arr[i].onclick = this.close;
                }
            }
            this.floaterRight.getElementsByTagName("img")[0].src = this.imgRightPath;
            document.body.appendChild(this.floaterRight);
        }
        floater.prototype.getScroll = function () {
            var iscrollTop;
            iscrollTop = document.documentElement.scrollTop + document.body.scrollTop;
            var itop =iscrollTop +(document.documentElement.clientHeight - this.floaterLeft.offsetHeight) / 2 + "px";
            this.floaterLeft.style.top = itop;
            this.floaterRight.style.top = itop;
        }
    floater.prototype.close=function()
    {
        document.body.removeChild(this.parentElement);
    }
    window.onload = function () {
        var mfloater = new floater({images:["./images/1.jpg","./images/2.jpg"],hrefs:["http://community.csdn.net/","http://www.sohu.com/"],isClose:true});
    }
    </script>
</head>
<body>
</body>
</html>有弄得不好的帮忙指点一下

调试易

求一个页面悬浮框

解决方案 »