浮动窗口的代码（html/js）

把浮动窗口的高度定在浏览器窗口从上100px的地方，横坐标始终定在内容部分右侧10px的地方。求高手帮忙提供代码~万分感谢~内容部分是浏览器中间对齐的。不同的显示器，分辨... 把浮动窗口的高度定在浏览器窗口从上100px的地方，
横坐标始终定在内容部分右侧 10px 的地方。
求高手帮忙提供代码~ 万分感谢~
内容部分是浏览器中间对齐的。
不同的显示器，分辨率下始终在中间。
浮动窗口相对浏览器窗口的（left right）也会相对改变。
http://shopping.naver.com/ 效果类似这个网站右边的浮动菜单。展开

 我来答

4个回答

#热议# 普通体检能查出癌症吗？

维湾教育培训
2015-12-06 · 知道合伙人软件行家

维湾教育培训
知道合伙人软件行家

采纳数：3549 获赞数：13649

无

向TA提问私信TA

关注

展开全部

第一种方法:
Html代码
<html>
<head>
<title>浮动窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>

Js代码
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}

css代码
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}

第二种方法:
消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'

　　页面加载loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>

　　关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>

　　打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>
// 消息框loading
function loading(){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");
o.fadeIn("fast");
}
// 消息框消失
function loaded(){
var o = $('#body_loading');
o.fadeOut("fast");
}
// 隐藏浮动窗口
function hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// 弹出浮动窗口
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var f=$('#show_upload_iframe');
var top = 200;
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded();
o.html(res);
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);
}
o.css("top",top+"px");
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});
f.show();
o.show();
}
});
}

已赞过 已踩过<

评论收起

‖Crazy_Baby‖
2011-02-22 · TA获得超过105个赞

知道答主

回答量：62

采纳率：0%

帮助的人：57.4万

我也去答题访问个人页

关注

展开全部

<!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>
<title>无法屏蔽的网页右下角浮动窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#msg_win{border:1px solid

#710B97;background:#F9EFFC;width:240px;position:absolute;right:0px;font-

size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-

index:99;}
#msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}
.icos a{float:left;color:#FFFFFF;margin:1px;text-align:center;font-

weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-

decoration:none;font-family:webdings;}
.icos a:hover{color:#FFCC00;}
#msg_title{background:#AC19E3;border-bottom:1px solid #710B97;border-top:1px

solid #FFF;border-left:1px solid #FFF;color:#FFFFFF;height:25px;line-

height:25px;text-indent:5px;font-weight: bold;
}
#msg_content{margin:5px;margin-

right:0;width:230px;height:126px;overflow:hidden;}
</style>
</head>
<body background="shopvip_v9_full.jpg">
<p style="height:1000px;"></p>
<div id="msg_win"

style="display:block;top:100px;visibility:visible;opacity:1;">
<div class="icos"><a id="msg_min" title="最小化" href="javascript:void

0">_</a><a id="msg_close" title="关闭" href="javascript:void 0">×</a></div>
<div id="msg_title">www.rofow.com</div>
<div id="msg_content">肿瘤康复网，为您的健康着想。
欢迎大家点击：<a href="http://www.rofow.com">www.rofow.com</a>
</div>
</div>
<script language="javascript">
var Message={
set: function() {//最小化与恢复状态切换
var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:

[1,0,'none',this.char[1],'恢复'];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display =set[2];
this.minbtn.innerHTML =set[3]
this.minbtn.title = set[4];
this.win.style.top = this.getY().top;
},
close: function() {//关闭
this.win.style.display = 'none';
window.onscroll = null;
},
setOpacity: function(x) {//设置透明度
var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不

随父透明度变化的bug
this.win.style.filter = v;
this.win.style.opacity = x / 100;
},
show: function() {//渐显
clearInterval(this.timer2);
var me = this,fx = this.fx(0, 100, 0.1),t = 0;
this.timer2 = setInterval(function() {
t = fx();
me.setOpacity(t[0]);
if (t[1] == 0) {clearInterval(me.timer2) }
},10);
},
fx: function(a, b, c) {//缓冲计算
var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;
return function() {return [a += cMath((b - a) * c), a - b]}
},
getY: function() {//计算移动坐标
var d = document,b = document.body, e = document.documentElement;
var s = Math.max(b.scrollTop, e.scrollTop);
var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
var h2 = this.win.offsetHeight;
return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
},
moveTo: function(y) {//移动动画
clearInterval(this.timer);
var me = this,a = parseInt(this.win.style.top)||0;
var fx = this.fx(a, parseInt(y));
var t = 0 ;
this.timer = setInterval(function() {
t = fx();
me.win.style.top = t[0]+'px';
if (t[1] == 0) {
clearInterval(me.timer);
me.bind();
}
},10);
},
bind:function (){//绑定窗口滚动条与大小变化事件
var me=this,st,rt;
window.onscroll = function() {
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st = setTimeout(function() {
me.win.style.top = me.getY().top;
me.show();
},600);
};
window.onresize = function (){
clearTimeout(rt);
rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
}
},
init: function() {//创建HTML
function $(id) {return document.getElementById(id)};
this.win=$('msg_win');
var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content:

'msg_content'};
for (var Id in set) {this[Id] = $(set[Id])};
var me = this;
this.minbtn.onclick = function() {me.set();this.blur()};
this.closebtn.onclick = function() {me.close()};
this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?

['_','::','×']:['0','2','r'];//FF不支持webdings字体
this.minbtn.innerHTML=this.char[0];
this.closebtn.innerHTML=this.char[2];
setTimeout(function() {//初始化最先位置
me.win.style.display = 'block';
me.win.style.top = me.getY().foot;
me.moveTo(me.getY().top);
},0);
return this;
}
};
Message.init();
</script>
</body>
</html>

追问

这个。。。 不应该这么长吧。。。

已赞过 已踩过<

评论收起

百度网友2306859
2011-02-22 · TA获得超过232个赞

知道小有建树答主

回答量：378

采纳率：75%

帮助的人：131万

我也去答题访问个人页

关注

展开全部

我也很期待答案

已赞过 已踩过<

评论收起

匿名用户
2011-02-26

展开全部

这里有一个弹出框效果
能自定义定位并随屏滚动而不抖动

里面有教程和源码

参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?2=s&id=12497

本回答被提问者采纳

已赞过 已踩过<

评论收起

2条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

浮动窗口的代码 （html/js）

其他类似问题

为你推荐：

浮动窗口的代码（html/js）