页面悬浮框
日期：2014-05-16 浏览次数：20401 次
求一个页面悬浮框
如题，请各位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>
如题，请各位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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
