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 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
原生javascript如何实现共享onload事件
Jul 03 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
我就是这样学习Python中的列表
2019/06/02 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
公司捐款倡议书
2014/05/14 职场文书
教师年终个人总结
2015/02/11 职场文书
家长对孩子的寄语
2015/02/26 职场文书
党员自我评价范文2015
2015/03/03 职场文书
村官2015年度工作总结
2015/10/14 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis