写了一个非常简单的 jQuery 插件实例  浮动层随窗口滚动滑动

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

(function($){

    $.fn.floatAutoScroll = function(){

        this.each(function(){

            var obj = $(this);

            var top = obj.css('top').replace('px', '');

            $(window).scroll(function(){

                var scrollTop = $(window).scrollTop();

                obj.stop().animate({ top:(top*1 + scrollTop*1) }, 'normal');

            });

        });

    }

})(jQuery);

$(function(){

    $('.float-container').floatAutoScroll();

});

</script>

<style type="text/css">

.main { height:1500px; }

.float-container { position:absolute; right:0; width:50px; height:50px; background-color:#960; }

.float1 { top:100px; }

.float2 { top:200px; }

.float3 { top:300px; }

</style>

</head>

<body>

<div class="main"></div>

<div class="float-container float1">浮动框1</div>

<div class="float-container float2">浮动框2</div>

<div class="float-container float3">浮动框3</div>

</body>

</html>

简单的 jQuery 浮动层随窗口滚动滑动插件实例的更多相关文章

  1. jQuery实现浮动层跟随页面滚动效果

      helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery  滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...

  2. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  3. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  4. jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...

  5. 浮动层固定兼容IE6 position:fixed的最佳解决方案

    第一种:css方法 有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固 ...

  6. 【Win 10应用开发】自定义浮动层——Flyout

    最近几天总是下雨,真是“何处秋窗无雨声”,也“不知风雨几时休”. 好,进入正题. 弹出层有三种. 第一种是ContentDialog,即内容对话框,它其实类似于模态对话框,弹出后会覆盖整个窗口区域,并 ...

  7. pc端有弹出层 并有滚动的时候遇到的问题以及解决

    有时候页面会遇到这样一个问题,页面有个弹出层 ,弹出层是有动条的,当弹出层滚完的时候,后面的页面也会滚动,但是我们希望是后面的页面不滚动;代码如下 1:弹出层出现的时候设置 $('body').css ...

  8. 封装两个简单的Jquery组件

    Jquery给我们提供了很大的方便,我们把他看成是一个公共库,以致在这个公共库上延伸出了很多Jquery插件:在项目过程中,有些插件总是不那么令人满意: 主要说两个项目用途: 1.  遮罩层,跟一般的 ...

  9. [转]【C#】分享一个弹出浮动层，像右键菜单那样召即来挥则去

    适用于:.net2.0+ Winform项目 背景: 有时候我们需要开一个简单的窗口来做一些事,例如输入一些东西.点选一个item之类的,可能像这样: 完了返回原窗体并获取刚刚的输入,这样做并没有什么 ...

随机推荐

  1. Putty的注册表设置

    Putty是一款非常好用的远程管理Linux系统的工具,其主要具有以下几个优点:  完全免费;  在Windows 9x/NT/2000下运行的都非常好;  全面支持SSH1和SSH2:  绿色软件, ...

  2. C++四种cast操作符

    C 风格(C-style)强制转型如下: (T) expression  或 T(expression) //函数风格(Function-style) 两种形式之间没有本质上的不同. 对于具有转换的简 ...

  3. 使用 Python Mock 类进行单元测试

    数据类型.模型或节点——这些都只是mock对象可承担的角色.但mock在单元测试中扮演一个什么角色呢? 有时,你需要为单元测试的初始设置准备一些“其他”的代码资源.但这些资源兴许会不可用,不稳定,或者 ...

  4. ecstore在MySQL5.7下维护报错WARNING:512 @ ALTER IGNORE TABLE

    ecstore在MySQL5.7下维护报错WARNING:512 @ ALTER IGNORE TABLE 打开 /app/base/lib/application/dbtable.php , 替换A ...

  5. String使用拼接对性能的影响和原因。

    需要频繁的拼接String的时候,使用\'+\'拼接会影响性能,应该用StringBuilder或者StringBuffer的append反方法来拼接,从执行速度上来讲:StringBuilder & ...

  6. json字符串和对象的相互转化

    json在代码中是经常用到的,在此总结一下json字符串和对象及数组之间的相互转化: 1.javascript函数方式: <1> JSON.stringify :把一个对象转换成json字 ...

  7. 【IE6的疯狂之十二】一个display:none引起的3像素的BUG

    今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码:   <div style="width: ...

  8. 制作自己的web字体

    今天教给大家制作自己的web字体

  9. 49、word2vec - tensorflow

    Python 3.5.2 (v3.5.2:4def2a2901a5, Jun 25 2016, 22:18:55) [MSC v.1900 64 bit (AMD64)] on win32Type & ...

  10. iOS根据网络图片的size大小设置UIImageView的大小

    有时候在设置UIImageView的大小时候需要根据UIimage的长宽比来自动设置,不让图片原比例失真. 如果是从本地获取到的图片,[UIImage imageNamed:@"" ...