十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
利用浮动窗口的鼠标移出/移入事件.
创新互联公司是一家集网站建设,白城企业网站建设,白城品牌网站建设,网站定制,白城网站建设报价,网络营销,网络优化,白城网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
为FORM或者BADY的onclick事件动态 绑定/解除绑定 一个function
这个function的内容就是控制窗口消失.
也就是说,只要鼠标移出了浮动层,那么就被绑定了一个单击事件:浮动层消失.
这个要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
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
JQuery实现将Div浮动到网页最上层。
可以通过Css的z-index属性来进行设置
具体代码:
$(".divClass").attr("z-index",999);
原理:
通过JQuery给指定的div增加属性'z-index'为'999',将指定div的层次拉到最高,这个所谓的999并不一定是999这个数字,只需要是你页面z-index的最大值就是可以的。
当页面加载的时候你就可以先将那个所谓动态数据加载到每个DIV下的浮动层。。当然是隐藏的。
鼠标放上去的时候直接显示到各DIV的对应位置就好了。
如果你非要鼠标放上去再加载数据那就是AJAX了。。大致思路就是各DIV的mouseover方法执行AJAX的远程调用方法获取数据再取回到这个浮动层显示。。