求一个页面悬浮框
如题，请各位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的论坛网页的两边 不天天挂着一副悬浮的框吗
[解决办法]
[解决办法]
http://ad.jz123.cn/ad/02/
[解决办法]
推荐Extjs的 Window控件
[解决办法]
[解决办法]
<!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>