13518219792
本文实例讲述了jQuery实现的简单悬浮层功能。分享给大家供大家参考，具体如下：
创新互联主营建德网站建设的网络公司,主营网站建设方案,重庆APP软件开发,建德h5小程序开发搭建,建德网站营销推广欢迎建德等地区企业咨询
运行效果图如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
titleTest/title
script
type="text/javascript"
language="javascript"
src="jquery-1.7.2.min.js"/script
script
type="text/javascript"
language="javascript"
$(function()
{
var
timer,
scrollTop,
sideDiv
=
$('#fudong').appendTo('body');
$(window).scroll(function()
{
timer
clearTimeout(timer);
scrollTop
=
$(this).scrollTop();
timer
=
setTimeout(function()
{
sideDiv.animate({
top:
scrollTop
+
100
+
'px'
},
600);
},
200);
});
});
/script
/head
body
div
id="fudong"
style="border:1px
solid
#454545;
width:150px;
height:400px;
position:
absolute;
right:
20px;
top:
100px;"
右侧悬浮层
/div
/body
/html
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejquery弹出层/title
script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"/script
script language="javascript"
function doAlert(){
var winW = $(window).width();
var winH = $(window).height();
var sroT = $(window).scrollTop();
var sroL = $(window).scrollLeft();
var objW = $("#centerWin").width();
var objH = $("#centerWin").height();
var left = (winW - objW) / 2 + sroL;
var top = (winH - objH) / 2 + sroT;
$("#centerWin").css("left",left).css("top",top).fadeIn(1000);
}
function moveWin(){
var winW = $(window).width();
var winH = $(window).height();
var sroT = $(window).scrollTop();
var sroL = $(window).scrollLeft();
var objW = $("#centerWin").width();
var objH = $("#centerWin").height();
var left = (winW - objW) / 2 + sroL;
var top = (winH - objH) / 2 + sroT;
$("#centerWin").animate({"left":left,"top":top},500).dequeue();
}
$(function(){
$("#alert").click(function(){
doAlert();
});
$(window).resize(function(){
moveWin();
}).scroll(function(){
moveWin();
});
$("#winaction").click(function(){
$("#centerWin").fadeOut(500);
});
});
/script
style type="text/css"
#centerWin{
width:400px;
height:200px;
padding:1px;
border:#00a8ff 1px solid;
font-size:12px;
display:none;
background:#ffffff;
position:absolute;
}
#winheader{
padding:1px;
height:25px;
background:#C2DDEE;
border-bottom:1px solid #00a8ff;
}
#wintitle{
width:370px;
float:left;
padding-top:5px;
text-align:left;
padding-left:10px;
}
#winaction{
width:18px;
float:left;
padding-top:5px;
text-align:center;
cursor:pointer;
}
#winbody{
width:300px;
text-align:left;
padding:30px 0px 0px 98px;
background:#ffffff;
display:inline-block;
}
.inputclass{
width:140px;
height:18px;
border:1px solid #00a8ff;
}
.inputbtn{
width:60px;
height:23px;
border:1px solid #00a8ff;
background:#c2ddee;
text-align:center;
padding-top:3px;
}
#empty{
padding:0px 10px;
}
/*以下是空白div高度，目的在于拉长页面，出现滚动条，以测试滚顶效果*/
#blank{
height:2000px;
}
/style
/head
body
a href="javascript:void(0);" id="alert"弹出层/a
div id="centerWin"
div id="winheader"
div id="wintitle"Login/div
div id="winaction" title="关闭"X/div
/div
div id="winbody"
管理员：input type="text" id="nameinput" class="inputclass" /p
密 码：input type="password" id="passwordinput" class="inputclass" /p
span id="empty"/spaninput type="button" id="login" class="inputbtn" value="登 录" /span id="empty"/span
span id="empty"/spaninput type="button" id="clear" class="inputbtn" value="清 除" /
/div
/div
div id="blank"/div
/body
/html
现在弹出的窗口大小是400px*200px，大小自己可以改css样式，反正弹出及随屏滚动效果就是这样实现的，祝你好运！！呵呵
当触发一个事件，弹出一个iframe，让这个iframe遮住后面的页面，这样后方的页面功能就会全部失效，也就可以达到一个遮罩的效果，再通过一个事件取消ifram，恢复后方页面的功能。
a.html
!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
html
head
titlemask/title
script type="text/javascript"
src=""/script
script
type="text/javascript"
$(document).ready(function
(){
$('#mask').bind({
click:function
(){
var c = "iframe frameborder='0'
class='mask'style='width:"+$(window).width()+";height:"+($(window).height())+"'
src='b.html'allowtransparency='true'/iframe";
$('body').append(c);
}
});
});
/script
style
type="text/css"
.mask{
display:block;
position:absolute;
z-index:100;
top:
0px;
left:0px;
filter:alpha(opacity=50);
}
body{
background-color:yellow;
}
/style
/head
body
center
ssssss
input type="button"
value="mask" id="mask"
/center
/body
/html
b.html
!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN"
html
head
titlemask/title
script type="text/javascript"
src=""/script
script
type="text/javascript"
$(document).ready(function
(){
$('#remove').bind('click',function
(){
$(window.parent.document).find('iframe').remove()
;
});
});
/script
style
type="text/css"
body{
background-color:
#6C7B8B;
}
/style
/head
body
center
brbrbrbrbrbrbrbrbr
input type="button"id="remove"
value="remove"
center
/body
/html
