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 相关文章推荐
javascript 函数使用说明
Apr 07 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JavaScript中的闭包
2016/02/24 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
班级活动策划书
2014/02/06 职场文书
创业资金计划书
2014/02/06 职场文书
贷款承诺书范文
2014/05/19 职场文书
大学开学感言
2015/08/01 职场文书
比较node.js和Deno
2021/04/27 Javascript
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android