写了一个非常简单的 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. Python第一天——入门Python(2)字符串的简单操作

    数据的操作 字符串的一些常用操作: 1 1 #!/usr/bin/env python 2 # #coding=utf-8 3 # 4 # test='hello world' 5 # print(t ...

  2. JavaScript中遍历数组 最好不要使用 for in 遍历

    先看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. SwiftyUserDefaults-封装系统本地化的框架

    // // ViewController.swift // Test4SwiftyUserDefaults // // Created by 马玉龙 on 2017/1/14. // Copyrigh ...

  4. CSS3 filter(滤镜) 属性

    filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...

  5. java 的序列化

    (1) 首先是java自己内部实现的对象序列化机制 其实就是ObjectInputStream 和 ObjectOutputStream 首先实现一个实体对象  记住必须实现Serializable ...

  6. 解决 maven项目问题 An error occurred while filtering resources

    解决方法: Maven -> Update Project.

  7. 又遇Release编译的一坑 -- 应用程序正常初始化(0xc000007b)失败。请单击“确定”，终止应用程序。

    项目中使用了xlslib库,以动态库形式编译,由于它没有生成链接库lib文件,所以官方提供的demo中有createDLL这个小程序用来生成lib文件.然而我又 no zuo no die了一次.   ...

  8. Linux下的数据监控工具

    Vmstat Vmstat,virtual memmory statistics(虚拟内存统计),主要是对操作系统的内存信息.进程状态.cpu活动等进行监视,但是它不能对某个进程进行深入的分析. Pr ...

  9. Malware Defender(HIPS主动防御软件) V2.8 免费版

    软件名称: Malware Defender(HIPS主动防御软件) V2.8 免费版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / Win ...

  10. java自带的监控工具VisualVM（二）远程监控

    ps:尝试了网上的几个网友提供的方法,始终不得其法,汇总后,终于尝试成功!将一些需要注意的细节也记录下来以后备用! 我们经常需要对我们的开发的软件做各种测试, 软件对系统资源的使用情况更是不可少, 目 ...