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


Posted in Javascript onJanuary 23, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
js核心基础之闭包的应用实例分析
May 11 Javascript
原生和jQuery的ajax用法详解
Jan 23 #Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 #Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 #Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 #Javascript
js选项卡的制作方法
Jan 23 #Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 #Javascript
详解javascript中对数据格式化的思考
Jan 23 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
python中定义结构体的方法
2013/03/04 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python中将字典转换为列表的方法
2016/09/21 Python
django 实现简单的插入视频
2020/04/07 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
如何设置Java的运行环境
2013/04/05 面试题
this关键字的作用
2016/01/30 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
成本会计岗位职责
2015/02/03 职场文书
黄石寨导游词
2015/02/05 职场文书
阿凡达观后感
2015/06/10 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python