源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js可拖动的后台界面

  • 时间:2020-01-09 01:42 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js可拖动的后台界面
// ************************ 拖动 *********************************     function setDrag(e){             var drag_flag = true;              var begin_x = getX(e);             //添加蒙板             createMask();             //添加半透明拖动条             createSplitDiv();     function getX(e){             if(window.event) e = window.event;             return (e.x || e.clientX);     }             function createSplitDiv(){         //半透明的拖动条         var _top = $doc("topArea").offsetHeight +"px";         var _left = $doc("dragBar").offsetLeft +"px";;         var _height = $doc("dragBar").offsetHeight +"px";;         var splitDivCss="position:absolute;width:6px;height:"+_height+";top:"+_top+";left:"+_left+";cursor:col- resize;background-color:#cccccc;overflow:hidden;z-index:10010;filter:alpha(opacity=50);opacity:0.5;";         var _splitDiv = document.createElement("div");         _splitDiv.id = "splitDiv";         _splitDiv.style.cssText = splitDivCss;         document.body.appendChild(_splitDiv);     }         function createMask(){             try{                 //创建背景                 var rootEl=document.documentElement||document.body;                 var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)? rootEl.clientHeight:rootEl.scrollHeight)+"px";                 var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth) +"px";                 var  shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#cccccc;z- index:10000;filter:alpha(opacity=0);opacity:0";                 var _shield = document.createElement("div");                 _shield.id = "shield";                 _shield.style.cssText = shieldStyle;                 document.body.appendChild(_shield);             }catch(e){}         }         //拖动时执行的函数         document.onmousemove = function(e){             try{                 if(drag_flag){                         var now_x = getX(e);                         var _pv = parseInt($doc("splitDiv").style.left)+ now_x - begin_x;                         $doc("splitDiv").style.left = _pv +"px";                          begin_x = now_x;                 }else{                         $doc("leftShow").style.width = $doc("splitDiv").style.left;                         document.body.removeChild($doc("shield"));                         document.body.removeChild($doc("splitDiv"));                         // 调整页面布局                         resizePage();                 }             }catch(e){}         }         document.onmouseup = function(){             try{                 if(drag_flag){                     //设定拖动条的位置(设定左侧的宽度)                     $doc("leftShow").style.width = $doc("splitDiv").style.left;                     document.body.removeChild($doc("shield"));                     document.body.removeChild($doc("splitDiv"));                     // 调整页面布局                     resizePage();                 }                 drag_flag = false;                 begin_x = null;             }catch(e){}         }     }     if(window.attachEvent){           window.attachEvent("onload",function(){resizePage();});           window.attachEvent("onresize",function(){resizePage();});     }   if(window.addEventListener){        window.addEventListener("load",function(){resizePage();},true);        window.addEventListener("resize",function(){resizePage();},true);   }
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部