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

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

 

 

 

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

 

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

 

下面就是个例子：

 

<script type="text/javascript">

/**
 * $.float
 * @extends jquery.1.4
 * @fileOverview 创建一个悬浮层，支持上、下、左、右、右中、左中浮动
 * @author 
 * @email [e-mail]
 * @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 class="customer" 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">&gt;&gt;您有 3 条未读消息</a>
					<br/>
					<br/>
					<a href="#" target="_blank" style="FONT-WEIGHT: bold; COLOR: blue">&gt;&gt;您有 4 个未处理任务</a>
				</div>
		</tr>
	</table>
<!--  ===========写你浮动框的业务代码=========== -->
</div>

 

 效果：

 

附件下载：