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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
MySQL 日期时间函数常用总结
2012/06/12 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python时间获取及转换知识汇总
2017/01/11 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
销售演讲稿范文
2014/01/08 职场文书
小学生家长寄语
2014/04/02 职场文书
员工工作自我评价
2014/09/26 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年工会工作总结
2015/03/30 职场文书
消防安全主题班会
2015/08/12 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
理解深度学习之深度学习简介
2021/04/14 Python