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实现计算加载页面所用的时间
Apr 02 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
vue实现评价星星功能
Jun 30 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
深入详解JS函数的柯里化
Jun 09 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python小白学习包管理器pip安装
2020/06/09 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
2014新年寄语
2014/01/20 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
办护照工作证明
2014/10/01 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
军训新闻稿范文
2015/07/17 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL