jquery.floatingbox 使用

 jquery.floatingbox 是一款很好的内容漂浮插件，它能够很好的根据自己的需求进行不同位置漂浮显示,官网
  Silverlight游戏开发中的资源的处理和图像算法1

实现代码如下：

1 . <% @ page language = " java "   import = " java.util.* "  pageEncoding = " UTF-8 " %>    
2 . <%    
3 .String path  =  request.getContextPath();   
4 .String basePath  =  request.getScheme() + " :// " + request.getServerName() + " : " + request.getServerPort() + path + " / " ;   
5 . %>    
6 .  
7 . <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN " >    
8 . < html >    
9 .   < head >    
10 .     < base href = " <%=basePath%> " >    
11 .       
12 .     < title > My JSP  ' index.jsp '  starting page </ title >    
13 .     < meta http - equiv = " pragma "  content = " no-cache " >    
14 .     < meta http - equiv = " cache-control "  content = " no-cache " >    
15 .     < meta http - equiv = " expires "  content = " 0 " >        
16 .     < meta http - equiv = " keywords "  content = " keyword1,keyword2,keyword3 " >    
17 .     < meta http - equiv = " description "  content = " This is my page " >    
18 .       
19 .     < style type = " text/css " >    
20 .       #FloaintBox {   
21 .          border - width: 1px;   
22 .          border - color: red;   
23 .          background - color: #cccffc;   
24 .       }    
25 .     </ style >    
26 .       
27 .   < script type = " text/javascript "  src = " <%=path%>/js/jquery.js " ></ script >    
28 .   < script type = " text/javascript "  src = " <%=path%>/js/jquery.floatingbox.js " ></ script >    
29 .   < script type = " text/javascript " >    
30 .  
31 .            $(document).ready(   
32 .                function()   
33 .                 {   
34 .                    $( ' #FloaintBox ' ).floating();   
35 .                }    
36 .            );   
37 .               
38 .         </ script >    
39 .     
40 .   </ head >    
41 .     
42 .   < body >    
43 .      < div id = " FloaintBox "   >    
44 .                 < h2 > JQuery Floating Box Plugin </ h2 >    
45 .                 < p >    
46 .                   We are specialized in  < br >    
49 .                 < ul >    
50 .                     < li > Website Design </ li >    
51 .                     < li > Survey System Creation </ li >    
52 .                     < li > E - commerce Site Development </ li >    
53 .                 </ ul >    
54 .                 < button onclick = " javascript:$('#FloaintBox').floatingPosition('left', 'top'); " > Top Left </ button >< br >    
55 .                 < button onclick = " javascript:$('#FloaintBox').floatingPosition('right', 'top'); " > Top Right </ button >< br >    
56 .                 < button onclick = " javascript:$('#FloaintBox').floatingPosition('left', 'bottom'); " > Bottom Left </ button >< br >    
57 .                 < button onclick = " javascript:$('#FloaintBox').floatingPosition('right', 'bottom'); " > Bottom Right </ button >    
58 .                 </ p >          
59 .             </ div >    
60 .   </ body >    
61 . </ html >