jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层


Posted in Javascript onMay 21, 2009
<!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> 
<title>jquery.text-effects</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
#test{ 
    position:absolute; 
    top:10px; 
    right:10px; 
    width:130px; 
    height:60px; 
    background:#555; 
    color:#fff; 
    font-size:13px; 
} 
</style> 
<script src="http://img.3water.com/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
    var menuYloc = $("#test").offset().top; 
    $(window).scroll(function (){ 
        var offsetTop = menuYloc + $(window).scrollTop() +"px"; 
        $("#test").animate({top : offsetTop },{ duration:600 , queue:false }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <h1>7行代码的跟随屏幕滚动层.</h1> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <div id="test">Dev By CssRain.cn<br/>Test ie6+,firefox3.0</div> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
</body> 
</html>
Javascript 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
jQuery使用方法
Feb 04 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
Javascript 的addEventListener()及attachEvent()区别分析
May 21 #Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 #Javascript
JS backgroundImage控制
May 19 #Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 #Javascript
编写兼容IE和FireFox的脚本
May 18 #Javascript
innerText和innerHTML 一些问题分析
May 18 #Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 #Javascript
You might like
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php生成图片验证码
2015/06/09 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
定义select的边框颜色
2008/04/28 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python中字典和集合学习小结
2017/07/07 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
python实现最短路径的实例方法
2020/07/19 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
十八大报告观后感
2014/01/28 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书