jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

 更新时间:2009年05月21日 03:07:26   作者:  
jQuery(1.3.2)7行代码搞定跟随屏幕滚动的层,代码很精简啊,非常不错。

复制代码 代码如下:

<!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.jb51.net/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>

相关文章

  • toggle()隐藏问题的解决方法

    toggle()隐藏问题的解决方法

    一个实例中使用到toggle函数,但是调用的时候会把元素隐藏掉,经搜索终于找到了原因,需要的朋友可以参考下
    2014-02-02
  • 浅谈jquery fullpage 插件增加头部和版权的方法

    浅谈jquery fullpage 插件增加头部和版权的方法

    下面小编就为大家分享一篇浅谈jquery fullpage 插件增加头部和版权的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看
    2018-03-03
  • 基于jquery用于查询操作的实现代码

    基于jquery用于查询操作的实现代码

    通过javascript得到用户操作改变url参数从而实现某些功能,如查询(具体的查询由服务器端代码得到url中的参数组成查询语句实现)。
    2010-05-05
  • 利用jq让你的div居中的好方法分享

    利用jq让你的div居中的好方法分享

    这篇文章主要介绍了利用jq让你的div居中的好方法,有需要的朋友可以参考一下
    2013-11-11
  • Jquery数字上下滚动动态切换插件

    Jquery数字上下滚动动态切换插件

    有时我们需要动态的展示访问次数、下载次数等效果,我们可以借助jQuery结合后台php实现一个滚动的数字展示效果。
    2015-08-08
  • jQuery+jsp下拉框联动获取本地数据的方法(附源码)

    jQuery+jsp下拉框联动获取本地数据的方法(附源码)

    这篇文章主要介绍了jQuery+jsp下拉框联动获取本地数据的方法,以实例形式较为详细的分析了jQuery结合jsp实现下拉联动菜单读取本地数据的相关技巧,并附带了完整源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • c#+jquery实现获取radio和checkbox的值

    c#+jquery实现获取radio和checkbox的值

    这篇文章主要介绍了c#结合jquery实现获取radio和checkbox的value值的方法,将代码分享给大家,需要的朋友可以参考下
    2014-12-12
  • 浅谈struts1 & jquery form 文件异步上传

    浅谈struts1 & jquery form 文件异步上传

    下面小编就为大家带来一篇浅谈struts1 & jquery form 文件异步上传。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • jQuery Jcrop插件实现图片选取功能

    jQuery Jcrop插件实现图片选取功能

    今天我们要在ASP.NET中用jQuery.Jcrop插件实现图片的选取功能,你想选取美女的哪个部位你说了算,我就管不着了
    2011-11-11
  • jQuery中even选择器的定义和用法

    jQuery中even选择器的定义和用法

    这篇文章主要介绍了jQuery中even选择器的定义和用法,较为详细的分析了event选择器的语法结构与具体用法,并以一个设置偶数行为蓝色字体的例子总结了其用法与功能特点,需要的朋友可以参考下
    2014-12-12

最新评论