jQuery实现的兼容性浮动层示例

本文实例讲述了jQuery实现的兼容性浮动层。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejQuery浮动层/title style type=' text/CSS ' # test { position : absolute；top: 10pxright: 10px宽度： 430像素；高度： 300像素背景# EEF2FB颜色：黑色；font-size : 13px边距-top : 50px；左侧： 50%;边距： 0px 0 0-215 px；文本对齐：中心；font-size : 16pxborder: 1px点绿色；}/style脚本src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' language=' JavaScript ' $(文档)。ready(function(){ var Menuyloc=$(' # test ')).偏移量()。顶部；var menuXloc=$('#test ').偏移量()。右；$(窗口)。scroll(function(){ var offsetTop=menuYloc $(window)).滚动ToP()" px "；$('#test ').animate({ top: offsetTop }，{ duration: 600，queue : false })；});});/script/headbody div div id='test '我就是悬浮的差异区域br /兼容：测试ie6，Firefox 3.0/div/div style='高度： 5000 px'/div/body/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery form操作技巧汇总》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。