第一次写插件,基于jQuery的(2)
2011-07-27 14:06
387 查看
View Code
<!DOCTYPE html> <html> <head> <title></title> <style> *{margin:0;padding:0; } #content{ width:960px; margin:0 auto; height:30px; border:solid 1px Red; background:red; } #floatTest{ background:Yellow; border:solid 1px Red; height:50px; width:200px; z-index:100; } </style> <script src="Scripts/jq.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.fn.myFloat = function (sets) { setEnd = $.extend({ parentEle: $("body"), //父元素 top: "30px", //绝对定位 right: "0px", //绝对定位 topDistance: "0" //最终距离浏览器顶端高度 }, sets || {}); var $this = $(this); //先在初始位置删除,填充到父元素中 $this.remove().appendTo(setEnd.parentEle); //父元素绝对定位 setEnd.parentEle.css("position", "relative"); //更改该区域的样式和定位方式 $this.css({ "position": "absolute", "top": setEnd.top, "right": setEnd.right }); var parOffHeight = setEnd.parentEle.attr("offsetTop"); var distance = parseInt(setEnd.topDistance); var topInt = parseInt(setEnd.top); var totalTop = parOffHeight + topInt - distance; $(window).scroll(function () { var scroTop = $(window).scrollTop(); if (scroTop < totalTop) { $this.animate({ "top": setEnd.top }, 10); } else { //。。。 var endTop = (topInt + scroTop - totalTop) + "px"; $this.animate({ "top": endTop }, 10); } }); //jQuery链式风格要求必须返回当前的jQuery对象 return $this; }; /* jQuery.fn.floatTest = function (distanceTop) { var $this = $(this); //这里的this是指当前的jQuery对象 $this.css({ position: "absolute" }); var initTop = $this.css("top"); var lengthTop; //先取得距离顶部的高度lenghtTop = 父元素的高度 + 父元素距离顶部的高度 var getParent = $this.parent(); if (typeof distanceTop === "undefined") { lengthTop = getParent.attr("offsetTop") + getParent.height(); } else { var space = parseInt(distanceTop); lengthTop = getParent.attr("offsetTop") + getParent.height() - space; } //页面滚动 $(window).scroll(function () { var changeTop = $(window).scrollTop(); //滚动的高度小于初始高度 if (changeTop < lengthTop) { $this.animate({ top: initTop }, 10); } else { //滚动的高度小于初始高度 var toTop = (parseInt(initTop) + changeTop - lengthTop) + "px"; $this.animate({ top: toTop }, 10); } }); } */ $(function () { $("#floatTest").myFloat({ parentEle: $("#c"), top: "50px", topDistance: "20px" }); }) </script> </head> <body style="margin:0"> <div style="height:200px;"></div> <div id="floatTest" style="">aaaa</div> <div id="content"> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div id="c">aaaaaaaaaaaaaaaaaaa</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
相关文章推荐
- 第一次写插件,基于jQuery的
- 基于jQuery的动态表格插件
- jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
- 分享几个基于jQuery不错的前端相册展示插件代码
- 基于jQuery省市县联动插件
- 基于jQuery的窗口插件:jMessageBox
- 基于jQuery的自用滚动插件
- 基于jQuery的可用于选项卡及幻灯的切换插件
- mmGrid基于jQuery的表格样式数据处理插件
- TimergliderJS 一个基于jQuery的时间轴插件
- 基于Jquery的表单(Form)美化插件
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于bootstrup 3的jQuery tooltip插件
- 基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js
- jQuery html5Validate基于HTML5表单验证插件
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件
- 一款基于jQuery的图片下滑切换焦点图插件
- 基于jquery的自动完成插件jquery.autocomplete.js
- [置顶] 分享几款基于jquery不错的时间插件