转：jQuery移动漂浮窗口
作者：互联网
html部分：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>移动窗口</title>
6 <style>
7 body{
8 margin: 0;
9 padding: 0;
10 width: 100%;
11 height: 1000px;
12 background: #eee;
13 }
14 /*示例1*/
15 #move_port{
16 position: fixed;
17 width: 15%;
18 min-height: 150px;
19 left: 0;
20 top:0;
21 cursor: pointer;
22 background: #2aabd2;
23 z-index: 10000;//调整层级
24 }
25 /*示例2*/
26 .move_div{
27 position: fixed;
28 width: 360px;
29 height: 200px;
30 left: 0;
31 top:0;
32 cursor: pointer;
33 background: #d2435c;
34 }
35 /*示例3*/
36 .d0{
37 position:relative;
38 width: 600px;
39 height: 500px;
40 margin: 50px auto;
41 background: #ddd;
42 }
43 .d1{
44 position: absolute;
45 width: 120px;
46 min-height: 80px;
47 left: 0;
48 top:0;
49 cursor: pointer;
50 background: #d2a12e;
51 }
52 /*示例4*/
53 .d2{
54 position:fixed;
55 left:0;
56 top:0;
57 width: 500px;
58 height: 300px;
59 background: #cc90c9;
60 }
61 .d3{
62 position: absolute;
63 width: 60px;
64 min-height: 80px;
65 left: 0;
66 top:0;
67 cursor: pointer;
68 background: #74d233;
69 }
70 </style>
71 </head>
72 <body>
73 <div id="move_port">
74 <h3>示例一:相对于body,从左上角开始移动</h3>
75 <p>
76 id为:move_port
77 <br>
78 调用方法时传一个参数,其他默认:
79 <br>
80 move_obj("#move_port");
81 </p>
82 </div>
83 <div class="move_div">
84 <h3>示例二:相对于body,从指定位置开始移动</h3>
85 <p>
86 class为:move_div
87 <br>
88 调用方法时传部分参数,空字符项为默认:
89 <br>
90 move_obj(".move_div",'','',10,10,800,500,100);
91 <br>
92 空字串仅起占位作用,参数将设置为默认值
93 </p>
94 </div>
95 <div class="d0">
96 <h3>示例三:相对于父级容器,从默认位置开始移动</h3>
97 <p>
98 class为:d0
99 <br>
100 调用方法时传前三个参数,其他默认:
101 <br>
102 move_obj(".d1",600,500);
103 <br>
104 600,500为父级容器大小,缺省参数将设置为默认值
105 </p>
106 <p style="color: red">
107 <b>传参时,请注意起始位置参数不要超过移动范围!</b>
108 </p>
109 <div class="d1">
110 子级相对父级移动
111 </div>
112 </div>
113 <div class="d2">
114 <h3>示例四:自身相对body移动,子级相对父级移动</h3>
115 <p>多个浮窗可用 <b>z-index</b> 调整显示层级</p>
116 <p>
117 自身class为:d2
118 <br>
119 子级class为:d3
120 <br>
121 调用方法时分别调用:
122 <br>
123 move_obj(".d2",'','','','','',300,200);
124 <br>
125 move_obj(".d3",500,300);
126 <br>
127 自己移动范围为父级容器大小
128 </p>
129 <div class="d3">
130 子级
131 </div>
132 </div>
133 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
134 <script src="move_port.js"></script>
135 <script>
136 /*调用移动浮窗方法并按顺序传入正确参数["obj",x,y,l,t,m],obj必填*/
137 //示例:
138 move_obj("#move_port");
139 move_obj(".move_div",'','',10,10,800,400,100);
140 move_obj(".d1",600,500);
141 move_obj(".d2",'','','','','',300,200);
142 move_obj(".d3",500,300);
143 </script>
144 </body>
145 </html>
jquery部分:
1 function move_obj(obj,move_w,move_h,x,y,l,t,m){
2 if(obj==undefined){
3 alert("方法调用错误,请传入正确参数!");
4 return;
5 }
6 move_w=(move_w==undefined||move_w=='')?$(window).width():move_w;//所在容器的宽度
7 move_h=(move_h==undefined||move_h=='')?$(window).height():move_h;//所在容器的高度
8 x=(x==undefined||x=='')?3:x;//每个时间段的横向位移距离
9 y=(y==undefined||y=='')?3:y;//每个时间段的纵向位移距离
10 l=(l==undefined||l=='')?0:l;//初始左偏移量:left
11 t=(t==undefined||t=='')?0:t;//初始上偏移量:top
12 m=(m==undefined||m=='')?80:m;//时间
13 function moving(){
14 x=(l>=move_w-$(obj).width()||l<0)?-x:x;
15 y=(t>=move_h-$(obj).height()||t<0)?-y:y;
16 l+=x;
17 t+=y;
18 $(obj).css({
19 left:l,
20 top:t
21 });
22 }
23 var timer_move=setInterval(function(){
24 moving();
25 },m);
26 $(obj).mouseover(function(){
27 $(this).children(".close_port").show();
28 clearInterval(timer_move);
29 });
30 $(obj).mouseout(function(){
31 $(this).children(".close_port").hide();
32 timer_move=setInterval(function(){
33 moving();
34 },m);
35 });
36 var close="<div class=\"close_port\">×</div>";
37 $(obj).append(close);
38 $(".close_port").css({
39 position:'absolute',
40 display:'none',
41 width:'20px',
42 height:'20px',
43 top:0,right:0,
44 color:'red',
45 border:'1px solid red',
46 background:'#ccc',
47 textAlign:'center',
48 lineHeight:'20px',
49 cursor:'pointer'
50 });
51 $(obj).on('click','.close_port',function(){
52 $(obj).find('.close_port').trigger('mouseover');
53 clearInterval(timer_move);
54 $(this).parent().remove();
55 })
56 }
文章转载自： http://www.jq22.com/jquery-info19228
标签：jQuery,obj,示例,漂浮,move,height,width,background,窗口 来源： https://www.cnblogs.com/fudanchencds/p/13031271.html