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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
js的写法基础分析
2011/01/17 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
简单实现python聊天程序
2018/04/01 Python
基于Python实现用户管理系统
2019/02/26 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
应届生求职自荐信
2014/07/04 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2015大学生实训报告
2014/11/05 职场文书
灵山大佛导游词
2015/02/04 职场文书
铁人观后感
2015/06/16 职场文书
小学生教师节广播稿
2015/08/19 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL