写了一个非常简单的 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. express搭建简易web的服务器

    express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...

  2. 当我们在谈论kmeans（3）

        本系列意在长期连载分享,内容上可能也会有所删改: 因此如果转载,请务必保留源地址,非常感谢! 博客园:http://www.cnblogs.com/data-miner/(暂时公式显示有问题) ...

  3. Django 1.10中文文档-第一个应用Part2-模型和管理站点

    本教程继续Part1.我们将设置数据库,创建您的第一个模型,并快速介绍Django的自动生成的管理网站. 数据库设置 现在,编辑mysite/settings.py.它是一个用模块级别变量表示Djan ...

  4. 国内的阿里云MAVEN仓库，速度很快

    配置很简单,修改conf文件夹下的settings.xml文件,添加如下镜像配置: <mirrors> <mirror> <id>alimaven</id&g ...

  5. Docker集群实验环境布署--swarm【2 搭建本地镜像仓库】

      在10.40.100.148上   # docker run -d -p 5000:5000 --restart=always --name docker-registry.venic.com - ...

  6. hdu1042

    #include"stdio.h" #include"stdlib.h" #include"string.h" #define N 1000 ...

  7. mysql报错1024-can't get hostname for your address

    前一段时间mysql用的好好的,突然一天,mysql启动后,在使用navicat连接数据库的时候 报错1024-can't get hostname for your address 这里我是这样解决 ...

  8. java 执行redis的部分方法

    @Autowired private RedisTemplate<String, Object> redisTemplate; public void setRedisTemplate(R ...

  9. js学习笔记1

    就是调用对象是一个Array,对Array类型增加了一个原型写法的函数,一般写一些扩展时经常用.比如判断一个元素是否在数组中之类的 Array.prototype.inArray=function(v ...

  10. (转载)js 快捷键大全，并有简单使用说明

    摘要: (转载)原文链接: http://www.cnblogs.com/fire-phoenix/archive/2010/09/28/1837295.html Code highlighting ...