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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
JavaScript前端面试组合函数
Jun 21 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php压缩文件夹最新版
2018/07/18 PHP
农历与西历对照
2006/09/06 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python如何实现图片压缩
2020/09/11 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
python 自动识别并连接串口的实现
2021/01/19 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
班长岗位职责
2013/11/10 职场文书
前台接待的工作职责
2013/11/21 职场文书
九年级政治教学反思
2014/02/06 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
农村门前三包责任书
2014/07/25 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js