写了一个非常简单的 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. ASP.NET 程序发布详细过程

    前言 ASP.NET网站的发布,无论是初学者还是高手,在程序的发布过程中或多或少会存在一些问题,譬如VS发布ASP.NET程序失败.IIS安装失败.IIS发布失败.局域网内不能访问 配置文件错误.权限 ...

  2. C语言之循环结构 for(二)

    一 for循环的嵌套使用 for循环的嵌套语法: for(int i =0;i<10;i++){ for(int j=0;j<5;j++){ } } 一般用来打印平面,或者控制平面,或者说 ...

  3. memcached缓存技术

    初学memcached缓存技术,如果文章写得不好还请谅解 应用环境:win7 实现环境:cmd,eclipse Memcached简洁而强大.它的简洁设计便于快速开发,减轻开发难度,解决了大数据量缓存 ...

  4. 从ASP.NET Web API 2 (C#)开始说起

    [译]Getting Started with ASP.NET Web API 2 (C#) 单击此处查看原文 HTTP不是单单为网页服务的,它更是一种用于构建API(用于暴露服务和数据)的强大平台. ...

  5. 【01背包】HDU 2546 饭卡

    Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submission(s) ...

  6. equals和hashcode为什么要一起重写

    equals()方法与hashCode()的通用协定是:2.1 如果两个对象相等(equal),那么必须拥有相同的哈希码(hash code)2.2 即使两个对象有相同的哈希值(hash code), ...

  7. NYOJ-括号配对问题 <技巧性的非栈道法>

    括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3  描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0<N<=100) ...

  8. 5754Life Winner Bo

    给定一个n*m的矩阵,有四种棋子(国际象棋的王,王后,骑士,车).起点在(1,1)先走到(n,m)获胜. 分析:车是nim博弈.王后是威佐夫博弈.王和骑士写两个1000*1000的预处理即可. hdu ...

  9. 谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变

    在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只 ...

  10. LINQ 之Union All/Union/Intersect操作

    闪存 首页 新随笔 管理 订阅     Union All/Union/Intersect操作 适用场景:对两个集合的处理,例如追加.合并.取相同项.相交项等等. Concat(连接) 说明:连接不同 ...