jQuery插件 悬浮多级菜单导航 jquery悬浮窗口

html部分：

1 <div id="img1"><a href=""><img src="user_avator.png" alt=""></a></div>

css部分：

1 *{
2     padding: 0;
3     margin: 0;
4 }
5 #img1{
6     position: fixed;
7     z-index: 10;
8     left: 10px;
9     top: 100px;
10 }

jquery部分：

1 $(function(){
 2     var oLeft = 10;    //初始左偏移量
 3     var oTop = 100;    //初始上偏移量
 4     var time = 30;    //漂浮时间，可能太慢，可以自己将时间改小调快点
 5     var xon = true;    //左右漂浮开关
 6     var yon = true;    //上下漂浮开关
 7     var bodyW = $(window).width();    //浏览器可视宽度
 8     var bodyH = $(window).height();    //浏览器可视高度
 9     $(window).resize(function(){
10         bodyW = $(window).width();    //浏览器变化时，浏览器可视宽度
11         bodyH = $(window).height();    //浏览器变化时，浏览器可视高度
12     });
13     var imgW = $("#img1").outerWidth();    //漂浮物体的宽度
14     var imgH = $("#img1").outerHeight();    //漂浮物体的高度
15     function move(){
16         if(xon){
17             oLeft += 1; 
18         }else{
19             oLeft -= 1;
20         }
21         if(yon){
22             oTop += 1; 
23         }else{
24             oTop -= 1;
25         }
26         $("#img1").css("left",oLeft);
27         $("#img1").css("top",oTop);
28         if(oLeft<=0){
29             xon = true;
30         }
31         if(oLeft >= bodyW - imgW){
32             xon = false;
33         }
34         if(oTop<=0){
35             yon = true;
36         }
37         if(oTop >= bodyH - imgH){
38             yon = false;
39         }
40     }
41     var timeMove = setInterval(move,time);　　//定时器
44     $("#img1").hover(function(){
45         clearInterval(timeMove);
46     },function(){
47         timeMove = setInterval(move,time);
50     })
51 })