AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery实现的简单悬浮层功能完整实例

51自学网 http://www.wanshiok.com
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>Test</title><script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript" language="javascript" >$(function() {  var timer, scrollTop, sideDiv = $('#fudong').appendTo('body');  $(window).scroll(function() {    timer && clearTimeout(timer);    scrollTop = $(this).scrollTop();    timer = setTimeout(function() {      sideDiv.animate({        top: scrollTop + 100 + 'px'      }, 600);    }, 200);  });});</script></head><body ><div id="fudong" style="border:1px solid #454545; width:150px; height:400px; position: absolute; right: 20px; top: 100px;">  右侧悬浮层</div></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

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


jQuery,悬浮层  
上一篇:获取IE浏览器Cookie信息的方法  下一篇:原生和jQuery的ajax用法详解