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 }