jQuery实现的兼容性浮动层示例
更新时间：2016年08月02日 09:16:30 作者：Quber
这篇文章主要介绍了jQuery实现的兼容性浮动层,可兼容IE、火狐等主流浏览器,涉及jQuery针对页面元素的运算与属性的动态设置相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的兼容性浮动层。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery浮动层</title>
<style type="text/css">
#test
{
position: absolute;
top: 10px;
right: 10px;
width: 430px;
height: 300px;
background: #EEF2FB;
color: Black;
font-size: 13px;
margin-top: 50px;
left: 50%;
margin: 0px 0 0 -215px;
text-align: center;
font-size: 16px;
border: 1px dotted green;
}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var menuYloc = $("#test").offset().top;
var menuXloc = $("#test").offset().right;
$(window).scroll(function () {
var offsetTop = menuYloc + $(window).scrollTop() + "px";
$("#test").animate({
top: offsetTop
}, {
duration: 600, queue: false
});
});
});
</script>
</head>
<body>
<div>
<div id="test">
我就是悬浮的DIV区域<br />
兼容：Test ie6+,firefox3.0</div>
</div>
<div style="height: 5000px;">
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery中使用data()方法读取HTML5自定义属性data-*实例
如果你使用jQuery类库，那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险2014-04-04
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
上一篇解决了用了JQUERY-EASYUI时 后端注册脚本重复执行的问题．今天又发现，通过后端代码 生成的界面有错位现象．2010-06-06
javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足
用onpropertychange,oninput事件解决onchange事件的不足，需要的朋友可以参考下。2010-11-11
由于ajax的独特优势，使得它在当前大量网站得到了广泛的应用，下面就介绍一下ajax如何调用后台定义的函数，对ajax调用后台方法相关知识感兴趣的朋友一起学习吧2015-12-12
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
为什么我不直接用modal form来做呢？所以我就做了个jquery下面dialog的插件，需要引用原来dialog的文件。2010-09-09
这篇文章主要介绍了jQuery实现内容定时切换效果,以完整实例形式较为详细的分析了jQuery结合时间函数针对内容的定时切换显示相关技巧,需要的朋友可以参考下2016-04-04
jQuery操作checkbox选择(list/table)
本文将介绍下checkbox list选择及checkbox table选中附效果图，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
这篇文章主要介绍了jQuery实现的自适应焦点图效果,结合完整实例形式分析了jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JQuery常见节点操作,结合实例形式分析了jQuery针对元素节点的添加、删除常见操作函数使用技巧与相关注意事项,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了jQuery在ul中显示某个li索引号的方法,涉及jQuery遍历元素的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
最新评论