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实现div浮动层跟随页面滚动效果
复制代码 代码如下: <!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=&qu
-
jQuery实现浮动层随浏览器滚动条滚动的方法
本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法.分享给大家供大家参考.具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-
jQuery实现的浮动层div浏览器居中显示效果
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script> 2.在页面的head中加入浮动层和遮罩层的样式 <style> #previewDiv{z-ind
-
jQuery页面滚动浮动层智能定位实例代码
HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position&q
-
jQuery实现点击按钮弹出可关闭层的浮动层插件
本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具
-
基于jquery的浮动层效果代码
本浮动层基于jQuery1.6.2,对于研究1.6版本的jquery很有帮助意义. jquery浮动层 #Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;} $(document).ready(function(){ $(window).scroll(function (){ var offsetTop = $(window).scrollTop()
-
jQuery实现可拖动的浮动层完整代码
以下是使用jQuery实现可拖动的浮动层的完整代码,复制保存到html文件就可以体验效果.也可以访问以下网址体验效果:http://www.keleyi.com/keleyi/phtml/dragdiv.htm 光标移动到层上,按住鼠标就可以拖动层. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
-
jquery简单的弹出层浮动层代码
jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln
-
JQuery浮动DIV提示信息并自动隐藏的代码
复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击
-
基于JQuery的浮动DIV显示提示信息并自动隐藏
复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击
-
jQuery powerFloat万能浮动层下拉层插件使用介绍
一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:"懒".不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉就好比<大话西游>里悟空一巴掌拍死唐僧这只苍蝇一样.那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等). 二.插件概述 插件名为jque