页面悬浮框

2012-06-07

求一个页面悬浮框如题，请各位JS大侠，能不能给一些页面动态悬浮框的例子，显示图片，能关闭的，谢谢！[解决办法

求一个页面悬浮框
如题，请各位JS大侠，能不能给一些页面动态悬浮框的例子，显示图片，能关闭的，谢谢！

[解决办法]
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的论坛网页的两边不天天挂着一副悬浮的框吗
[解决办法]

探讨

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

对呀！那你有例子吗？

[解决办法]
http://ad.jz123.cn/ad/02/
[解决办法]
推荐Extjs的 Window控件
[解决办法]

探讨

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>
[解决办法]
引用jquery-1.5.1.js
[解决办法]

HTML code

<!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>

热点排行

JavaScript

页面悬浮框