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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
jquery uaMatch源代码
Feb 14 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
jquery datatable服务端分页
Aug 31 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
详解Vue之父子组件传值
Apr 01 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在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
男方父母证婚词
2014/01/12 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
《观舞记》教学反思
2014/04/16 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
护理工作个人总结
2015/03/03 职场文书
新闻稿件写作范文
2015/07/18 职场文书
运动会跳远广播稿
2015/08/19 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL