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弹出窗口方法汇总
Aug 12 Javascript
javascript常见操作汇总
Sep 03 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
JS ES6异步解决方案
Apr 29 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Python3分析处理声音数据的例子
2019/08/27 Python
Python字符串的修改方法实例
2019/12/19 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
2014年自我评价
2014/01/04 职场文书
求职意向书
2014/04/01 职场文书
销售代理协议书
2014/09/30 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL