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 相关文章推荐
图片之间的切换
Jun 26 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 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
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP计数器的实现代码
2013/06/08 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php递归函数怎么用才有效
2018/02/24 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
js获取form的方法
2015/05/06 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python中的多重继承实例讲解
2014/09/28 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python的迭代器和生成器
2015/07/29 Python
Python函数装饰器实现方法详解
2018/12/22 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
python创建子类的方法分析
2019/11/28 Python
tensorflow之并行读入数据详解
2020/02/05 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
如何利用python生成MD5并去重
2020/12/07 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
七年级生物教学反思
2014/01/30 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
暑期家教宣传单
2015/07/14 职场文书
《窃读记》教学反思
2016/02/18 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python