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中的new的使用方法与注意事项
May 16 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
JS数组的常用10种方法详解
May 08 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 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
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
JQuery live函数
2010/12/24 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
微信小程序数据存储与取值详解
2018/01/30 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python写的一个文本编辑器
2014/01/23 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
财务与信息服务专业推荐信
2013/11/28 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS