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 相关文章推荐
js常用排序实现代码
Dec 28 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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
Smarty模板快速入门
2007/01/04 PHP
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
python super函数使用方法详解
2020/02/14 Python
python实现无边框进度条的实例代码
2020/12/30 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
毕业寄语大全
2014/04/09 职场文书
消防安全宣传口号
2014/06/10 职场文书
八项规定对照检查材料
2014/08/31 职场文书
离职信范本
2015/06/23 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
新娘婚礼致辞
2015/07/27 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers