jsfoot 网页特效--悬浮层，支持上、下、左、右、右中、左中浮动

http://www.jsfoot.com/jquery/rating/

?

?

?

这里面有很多的特效。。。非常实用。。。嘿嘿。。。

?

?而且代码非常优美。。。O(∩_∩)O哈哈~。。

?

下面就是个例子：

?

<script type="text/javascript">/** * $.float * @extends jquery.1.4 * @fileOverview 创建一个悬浮层，支持上、下、左、右、右中、左中浮动 * @author  * @email mohaiguyan12@126.com * @version 0.1 * @date 2010-04-18 * Copyright (c) 2010-2010  * @example *    $("#to-right").float({position:"rm"}); //右中位置浮动 */jQuery.fn.float= function(settings){if(typeof settings == "object"){settings = jQuery.extend({//延迟delay : 1000,//位置偏移offset : {left : 0,right : 0,top : 0,bottom : 0},style : null, //样式width:100,  //宽度height:200, //高度position:"rm" //位置}, settings || {});var winW = $(window).width();var winH = $(window).height(); //根据参数获取位置数值function getPosition($applyTo,position){var _pos = null;switch(position){case "rm" : $applyTo.data("offset","right");$applyTo.data("offsetPostion",settings.offset.right);_pos = {right:settings.offset.right,top:winH/2-$applyTo.innerHeight()/2};break;case "lm" :$applyTo.data("offset","left");$applyTo.data("offsetPostion",settings.offset.left);_pos = {left:settings.offset.left,top:winH/2-$applyTo.innerHeight()/2};break;case "rb" :_pos = {right:settings.offset.right,top:winH - $applyTo.innerHeight()};break;case "lb" :_pos = {left:settings.offset.left,top:winH - $applyTo.innerHeight()};break;case "l" : _pos = {left:settings.offset.left,top:settings.offset.top};break;case "r" : _pos = {right:settings.offset.right,top:settings.offset.top};break;case "t" :$applyTo.data("offset","top");$applyTo.data("offsetPostion",settings.offset.top);_pos = {left:settings.offset.left,top:settings.offset.top};break;case "b" :$applyTo.data("offset","bottom");$applyTo.data("offsetPostion",settings.offset.bottom);_pos = {left:settings.offset.left,top:winH - $applyTo.innerHeight()};break;}return _pos;}//设置容器位置function setPosition($applyTo,position,isUseAnimate){var scrollTop = $(window).scrollTop();var scrollLeft = $(window).scrollLeft();var _pos = getPosition($applyTo,position);_pos.top += scrollTop;isUseAnimate && $applyTo.stop().animate(_pos,settings.delay) || $applyTo.css(_pos);} return this.each(function(){var $this =  $(this);$this.css("position","absolute");settings.style && $this.css(settings.style);setPosition($this,settings.position);$(this).data("isAllowScroll",true);$(window).scroll(function(){$this.data("isAllowScroll") && setPosition($this,settings.position,true);});})}else{var speed = arguments.length > 1 && arguments[1] || "fast"; this.each(function(){   if(settings == "clearOffset"){var _c = {};if($(this).data("offset")){ _c[$(this).data("offset")] = 0;  $(this).data("isAllowScroll",false); $(this).stop().animate(_c,speed);}}else if(settings == "addOffset"){var _c = {};if($(this).data("offset") && $(this).data("offsetPostion")){ _c[$(this).data("offset")] = $(this).data("offsetPostion");  $(this).stop().animate(_c,speed); $(this).data("isAllowScroll",true);}   }else if(settings == "setScrollDisable"){$(this).data("isAllowScroll",false);}else if(settings == "setScrollUsable"){$(this).data("isAllowScroll",true);}})}}$(function(){$(".customer").float({delay : 500,//延迟position:"rb" //位置});$("#close").click(function(){  $(".customer").hide(); });});</script>

??

?? HTML：??

<div style="width: 360px;height: 160px" ><!--  ===========写你浮动框的业务代码=========== --><table width="100%" border="0" cellpadding="0" cellspacing="0" style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" bgcolor="#cfdef4"><tr><td height="24" width="26" style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(images/msgTopBg.gif); COLOR: #0f2c8c" valign="middle"><img src="images/msgLogo.gif" hspace="5" align="absMiddle" vspace="1" /></td><td style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; BACKGROUND-IMAGE: url(images/msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px" valign="middle" width="100%">系统消息</td><td style="BACKGROUND-IMAGE: url(images/msgTopBg.gif); PADDING-TOP: 2px" valign="middle" width="19" align="right"><img id="close" src="images/msgClose.gif" hspace="3" style="CURSOR: pointer"  title="关闭" /></td></tr><tr><td colspan="3" height="90" style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(images/msgBottomBg.jpg); PADDING-BOTTOM: 1px"><div style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%"><a href="#" style="FONT-WEIGHT: bold; COLOR: red">>>您有 3 条未读消息</a><br/><br/><a href="#" target="_blank" style="FONT-WEIGHT: bold; COLOR: blue">>>您有 4 个未处理任务</a></div></tr></table><!--  ===========写你浮动框的业务代码=========== --></div>

?

?效果：

?

附件下载：