jQuery实现的简单悬浮层功能完整实例

本文实例讲述了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程序设计有所帮助。

求用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样式，反正弹出及随屏滚动效果就是这样实现的，祝你好运！！呵呵

jQuery 实现的遮罩层效果

当触发一个事件，弹出一个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