您当前的位置:首页 > 网络编程 > Js脚本 > 正文

分享:可以拖动并关闭的qq在线客服代码

【字体大小: 2010-04-17 12:20 来源: 作者:www.wzhan.net 

  一个可以自由拖动,并且可以关闭的qq在线客服代码,效果非常好。

  1.   <html> 
  2.   <head> 
  3.   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  4.   <title>Ajax提示框_站长吧客服_blog.chaidefu.com</title> 
  5.   <style type="text/css"> 
  6.   a {color:#000;font-size:12px;text-decoration:none;}  
  7.   a:hover {color:#900;text-decoration:underline}  
  8.   body {overflow:hidden}  
  9.   #massage_box {position:absolute;left:expression(body.clientWidth-170);top:expression(body.clientHeight-body.clientHeight+20);filter:dropshadow(color=#666666, offx=3offy=3positive=2);z-index:2;}  
  10.   #mask {position:absolute;top:0;left:0;width:expression(body.scrollWidth);height:expression(body.scrollHeight);background:#666;filter:ALPHA(opacity=60);z-index:1;visibility:hidden}  
  11.   .header {background:#036;width:118px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;padding:3 5 0 5;color:#fff}  
  12.   .qqb{ text-align:center; margin:5px 0 0 8px; width:100px; display:block;}  
  13.   </style> 
  14.   <!--实现层移动--> 
  15.   <script language="javascript"> 
  16.   var Obj='' 
  17.   document.onmouseup=MUp 
  18.   document.onmousemove=MMove 
  19.   function MDown(Object){  
  20.   Obj=Object.id  
  21.   document.all(Obj).setCapture()  
  22.   pX=event.x-document.all(Obj).style.pixelLeft;  
  23.   pY=event.y-document.all(Obj).style.pixelTop;  
  24.   }  
  25.   function MMove(){  
  26.   if(Obj!=''){  
  27.   document.all(Obj).style.left=event.x-pX;  
  28.   document.all(Obj).style.top=event.y-pY;  
  29.   }  
  30.   }  
  31.   function MUp(){  
  32.   if(Obj!=''){  
  33.   document.all(Obj).releaseCapture();  
  34.   Obj='';  
  35.   }  
  36.   }  
  37.   </script> 
  38.   </head> 
  39.   <body> 
  40.   <div id="massage_box"> 
  41.   <div class="massage"> 
  42.   <div class="header" onmousedown=MDown(massage_box)> 
  43.   <div style="display:inline; width:118px; position:absolute; background-image:url(images/up_001.gif); height:55px; margin-left:35px;"><span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand; width:20px;">×</span></div> 
  44.   </div> 
  45.   <ul> 
  46.   <li style="list-style:none;background-image:url(images/mid001.gif); height:70px; margin:50px 0 0 0; width:118px;"><br /><a class='qqb' target=blank href=upload/201004170927085155.gif border=0 align=middle style="margin-right:8px; margin-bottom:5px;"></a><a class='qqb' target=blank href=msnim:chat?contact=勿尤photo><img src=images/online.gif border=0 align=middle></a></li> 
  47.   <li style="list-style:none;"><img src="images/bot_001.gif" /></li> 
  48.   </ul> 
  49.   </div> 
  50.   </div> 
  51.   <div id="mask"></div> 
  52.   </body> 
  53.   </html> 

  欢迎转载,有兴趣转载的,请注明文章来自站长吧http://www.wzhan.net,非常感谢!

    顶一下
    (2)
    50%
    踩一下
    (2)
    50%
    【责任编辑:绝口不提】 标签:

    更多相关内容

    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: