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 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">>>您有 3 条未读消息</a> <br/> <br/> <a href="#" target="_blank" style="FONT-WEIGHT: bold; COLOR: blue">>>您有 4 个未处理任务</a> </div> </tr> </table> <!-- ===========写你浮动框的业务代码=========== --> </div>
?
?效果:
?
附件下载: