jQuery实现div浮动层跟随页面滚动效果


Posted in Javascript onFebruary 11, 2014
<!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" /> 
<meta name="keywords" content="滚动,漂浮层,php,jquery" /> 
<meta name="description" content="Helloweba演示平台,演示XHTML、CSS、jquery、PHP案例和示例" /> 
<title>jQuery实现浮动层跟随页面滚动效果</title> 
<link rel="stylesheet" type="text/css" href="../css/main.css" /> 
<style type="text/css"> 
#main{height:2000px} 
.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; padding:10px; } 
#demo1{position:relative; margin-top:-290px;} 
#demo2{position:absolute; margin-top:156px; right:10px;} 
.demo a{text-decoration:underline; cursor:pointer} 
.demo h3{font-size:14px} 
.demo p{line-height:20px} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.cookie.js"></script> 
<script type="text/javascript" src="jquery.scroll-follow.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#demo1").scrollFollow({ 
offset: 156 
}); 
$("#demo2").scrollFollow({ 
speed:1000, 
//offset: 156, 
//relativeTo:"bottom", 
killSwitch: "switchlink", 
onText: '取消滚动', 
offText: '开启滚动' 
}); 
}); 
</script> 
</head> <body> 
<div id="demo1" class="demo"> 
<img src="pic.jpg" align="" /> 
<h3>Demo 1</h3> 
<p>滚动鼠标滚轮或者拖动浏览器的滚动条看看。</p> 
</div> 
<div id="demo2" class="demo"> 
<img src="pic1.jpg" align="" /> 
<h3>Demo 2</h3> 
<p>你可以通过点击下面的链接来开启和关闭浮动层的跟随滚动效果。</p> 
<p><a id="switchlink">启动开关</a></p> 
</div> 
<div id="header"> 
<div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div> 
</div> 

<div id="main"> 
<h2 class="top_title"><a href="http://www.helloweba.com/view-blog-85.html">jQuery实现浮动层跟随页面滚动效果</a></h2> 
</div> 
<div id="footer"> 
<p>Powered by helloweba.com 允许转载、修改和使用本站的DEMO,但请注明出处:<a href="http://www.helloweba.com">www.helloweba.com</a></p> 
</div> 
<p id="stat"><script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script></p> 
</body> 
</html>
Javascript 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
JavaScript类属性的访问方式详解
Feb 11 #Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 #Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 #Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 #Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 #Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 #Javascript
js读取配置文件自写
Feb 11 #Javascript
You might like
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
详解javascript void(0)
2020/07/13 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
如何利用Python 进行边缘检测
2020/10/14 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
大学生简单自荐信
2013/11/10 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
mysql数据库隔离级别详解
2022/06/16 MySQL
Python可视化神器pyecharts绘制水球图
2022/07/07 Python