写了一个非常简单的 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. [转]解决VS2008 开发Windows Mobile 项目生成速度慢的问题

    最近用VS2008开发Windows Mobile程序,使用C#..NET Compact Framework,发现项目生成速度比较慢.用VS2008打开项目后,开始一段时间生成速度还能忍受,时间一长 ...

  2. 微信小程序开发（1）

    底限,HTML,CSS,JS得会 先过一下官方的文档:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161230 ...

  3. c#:readonly与const的区别

    readonly与const的区别: 1.初始化:const  字段只能在该字段的声明中初始化. readonly  字段可以在声明或构造函数中初始化. 2.值: const 字段是编译时常量(con ...

  4. Git创建空白新分支

    向分支提交一个初始的空commit,保证完全复位. 创建并切换新分支 git branch <new_branch> git checkout <new_branch> git ...

  5. C# Where

    判断一个字符串中是否包含字符串数组里的字符,恶意字符限制提交,一般人,包括最初的我,会这样写 public bool ValidateStr(string[] parms) { bool result ...

  6. elasticsearch+spark+hbase 整合

    1.用到的maven依赖 <dependency> <groupId>org.apache.spark</groupId> <artifactId>sp ...

  7. CodeForces 706D Vasiliy's Multiset

    字典树. 比较经典的题目了.把每一个数字都插入到字典树中,询问的时候如果$x$的第$i$位是$p$,那么尝试着在字典树上往$pXOR1$的节点走下去,没有$pXOR1$节点的话再走$p$的.删除操作的 ...

  8. Chrome开发者控制台的这些功能你都知道吗？

    Chrome内置了一些开发者工具,这些工具提供了很多的功能.今天,我们将会专注于JavaScript控制台. 在我编程的过程中,这个控制台为我提供了大量的帮助. 如果你正在电脑端阅读这篇文章,你可以在 ...

  9. uoj 55 紫荆花之恋 动态点分治+替罪羊式重构+treap

    每插入一个点,直接把它当做重心插入原树,当做是动态点分树一样维护 但这样深度会越来越大,所以我们用类似替罪羊的方法 当树失去平衡时,对子树进行一次点分,保证复杂度 #include <cstdi ...

  10. cocos2d-x中的init，onEnter，onExit......

    CCNode的init()方法和onEnter()方法: 一.调用顺序显示FirstScene时: FirstLayer::initFirstLayer::onEnterFirstLayer::onE ...