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 # 悬浮层 # jquery鼠标放上去显示悬浮层即弹出定位的div层 # jquery实现的可隐藏重现的靠边悬浮层实例代码 # 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框 # 自定义一个jquery插件[鼠标悬浮时候出现说明label] # jquery实现鼠标悬浮停止轮播特效 # jquery悬浮提示框完整实例 # 鼠标悬浮显示二级菜单效果的jquery实现 # jQuery实现悬浮在右上角的网页客服效果代码 # jQuery简单实现页面元素置顶时悬浮效果示例 # jQuery鼠标悬浮链接弹出跟随图片实例代码 # 相关内容 # 感兴趣 # 给大家 # 更多关于 # 所述 # 程序设计 # 拖拽 # 操作技巧 # 选择器 # 讲述了 # xmlns # gt # head # xhtml # TR # org # dtd # transitional # charset # text

返回目录在线咨询

上一篇：网页嵌入php链接失败服务器重启有用吗_网页嵌入php链接失败重启操作法【说明】
下一篇：云上建站后，如何提升网站性能和加载速度？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求