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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
javascript的console.log()用法小结
May 31 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
用vue写一个日历
Nov 02 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的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
如何进行有效的自我评价
2013/09/27 职场文书
施工安全生产承诺书
2014/05/23 职场文书
服装设计师求职信
2014/06/04 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
校运动会广播稿300字
2014/10/07 职场文书