基于jquery的浮动层效果代码
本浮动层基于jQuery1.6.2,对于研究1.6版本的jquery很有帮助意义。
jquery浮动层
#Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;}
$(document).ready(function(){
$(window).scroll(function (){
var offsetTop = $(window).scrollTop() + 80 +"px";
$("#Float").animate({top : offsetTop },{ duration:500 , queue:false });
});
});
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
jQuery实现div浮动层跟随页面滚动效果
复制代码 代码如下: <!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=&qu
-
jQuery页面滚动浮动层智能定位实例代码
HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position&q
-
jQuery powerFloat万能浮动层下拉层插件使用介绍
一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:"懒".不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉就好比<大话西游>里悟空一巴掌拍死唐僧这只苍蝇一样.那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等). 二.插件概述 插件名为jque
-
jQuery实现的浮动层div浏览器居中显示效果
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script> 2.在页面的head中加入浮动层和遮罩层的样式 <style> #previewDiv{z-ind
-
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
-
jQuery实现点击按钮弹出可关闭层的浮动层插件
本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具
-
jQuery实现可拖动的浮动层完整代码
以下是使用jQuery实现可拖动的浮动层的完整代码,复制保存到html文件就可以体验效果.也可以访问以下网址体验效果:http://www.keleyi.com/keleyi/phtml/dragdiv.htm 光标移动到层上,按住鼠标就可以拖动层. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
-
jQuery实现浮动层随浏览器滚动条滚动的方法
本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法.分享给大家供大家参考.具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-
基于JQuery的浮动DIV显示提示信息并自动隐藏
复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击
-
jquery简单的弹出层浮动层代码
jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln
-
JQuery浮动DIV提示信息并自动隐藏的代码
复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击
随机推荐
- 透过ashx看浏览器服务器运行本质(图解)
- 用vbs将名称截断以使其最多包含 16 个字符的代码
- Java中对象序列化与反序列化详解
- javascript延时重复执行函数 lLoopRun.js
- js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
- js监听输入框值的即时变化onpropertychange、oninput
- php版微信开发之接收消息,自动判断及回复相应消息的方法
- 在Debian 9系统上安装Mysql数据库的方法教程
- 兼容主流浏览器的iframe自适应高度js脚本
- javascript cookie解码函数(兼容ff)
- SQL Server 使用触发器(trigger)发送电子邮件步骤详解
- php生成RSS订阅的方法
- webpack学习笔记之代码分割和按需加载的实例详解
- javascript学习笔记(六)数据类型和JSON格式
- Android 媒体开发之MediaPlayer状态机接口方法实例解析
- C#多线程传递参数及任务用法示例
- 最新Android版本、代号、对应API/NDK级别、发布时间及市场份额
- Python编程pygame模块实现移动的小车示例代码
- vue项目中导入swiper插件的方法
- 详解Node.js中的Async和Await函数