浮动层jquery,楼房悬浮层

HTML中的浮动层实现代码，怎么编写？

这个要js/jquery才OK，下面的代码使用了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

style type="text/css"

#Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;}

/style

/head

script type="text/javascript" src=""/script

script language="javascript"

$(document).ready(function(){

$(window).scroll(function (){

var offsetTop = $(window).scrollTop() + 80 +"px";

$("#Float").animate({top : offsetTop },{ duration:500 , queue:false });

});

});

/script

body

div style="height:2000px;"/div

div id="Float"/div

/body

/html

相关问答

Q1: jquery如何实现把一个div浮动到网页最上层

JQuery实现将Div浮动到网页最上层。

可以通过Css的z-index属性来进行设置

具体代码：

$(".divClass").attr("z-index",999);

原理：

通过JQuery给指定的div增加属性'z-index'为'999'，将指定div的层次拉到最高，这个所谓的999并不一定是999这个数字，只需要是你页面z-index的最大值就是可以的。

Q2: jquery实现动态绑定数据后，鼠标移上去悬浮div显示详细信息

当页面加载的时候你就可以先将那个所谓动态数据加载到每个DIV下的浮动层。。当然是隐藏的。

鼠标放上去的时候直接显示到各DIV的对应位置就好了。

如果你非要鼠标放上去再加载数据那就是AJAX了。。大致思路就是各DIV的mouseover方法执行AJAX的远程调用方法获取数据再取回到这个浮动层显示。。

Q3: 三张并列div上分别有三个浮动层，jquery鼠标经过时候显示浮动层，移开的时候隐藏浮动层

!DOCTYPE html

html

  head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"/script

style

div.wrap{

margin:0 auto;

width:303px;

height:100px;

}

div.wrapdiv{

background-color:red;

width:100px;

height:100px;

float:left;

display:inline-block;

margin-right:1px;

}

div.wrapdivdiv{

background-color:gray;

opacity:.8;

width:100px;

height:30px;

margin-top:70px;

text-align:center;

line-height:30px;

}

/style

script

$(function(){

$(".wrapdiv").hover(function(){

$(this).find("div").show();

},function(){

$(this).find("div").hide();

}).find("div").hide();

});

/script

title/title

  /head

body

     div class="wrap"

div

div1/div

 /div  

 div

 div11/div

 /div

 div

 div111/div

 /div

/div

  /body

/html

Q4: 网页浮动窗口用JQuery 如何实现单击不在浮动窗口上时，让它消失，怎么做??

利用浮动窗口的鼠标移出/移入事件.

为FORM或者BADY的onclick事件动态 绑定/解除绑定 一个function

这个function的内容就是控制窗口消失.

也就是说,只要鼠标移出了浮动层,那么就被绑定了一个单击事件:浮动层消失.

Q5: jquery（scrollTop）怎样判断距离浏览器顶部有一定距离时显示

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

titlejquery浮动层/title

script src="jquery-1.8.3.js"/script!-- 注意修改引用路径 --

style type="text/css"

#Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;}

/style

/head

script language="javascript"

$(document).ready(function(){

$(window).scroll(function (){

// 让浮动层距离窗口顶部，始终保持80px

var offsetTop = $(window).scrollTop() + 80 +"px";

$("#Float").animate({top : offsetTop },{ duration:500 , queue:false });

});

});

/script