简单的 jQuery 浮动层随窗口滚动滑动插件实例

简介:

写了一个非常简单的 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>


目录
相关文章
|
1月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
|
1月前
|
JavaScript
jQuery制作滑动特效(1)
jQuery制作滑动特效(1)
|
1月前
|
JavaScript
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
51 0
|
1月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
41 0
|
1月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
26 0
|
1月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
38 0
|
前端开发 JavaScript API
jquery实战第一讲---概述及其入门实例
       就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒,晕车的小伙伴家中常备晕车药,关于远洋面试的一些总结,小编会后续在博客中贴出,希望对有需要的小伙伴一些帮助,通过面试发现面试官大量的提问jquery的相关知识,那时年少,学习jquery的时候,想起来就是一把辛酸泪,于是,小编励志再把JQuery的相关知识复习一遍,把相关的知识点总结到博客中,欢迎不同意见的小伙伴一起讨论交流。
1268 0
|
前端开发 JavaScript 关系型数据库
JQuery实战---初识JQuery+入门实例
       JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇博客...
1308 0