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脚本编程解决考试分数统计问题
Oct 18 Javascript
jqgrid 简单学习笔记
May 03 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php中switch语句用法详解
2015/08/17 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
python实现决策树
2017/12/21 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
What is EJB
2016/07/22 面试题
求职信的七个关键技巧
2014/02/05 职场文书
业务员自荐信范文
2014/04/20 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014年领班工作总结
2014/11/25 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
python_tkinter事件类型详情
2022/03/20 Python
Redis 限流器
2022/05/15 Redis