• div框,左右拖动



    <script type="text/javascript"> function bindResize(el){ //初始化参数 var els = document.getElementById('admin-offcanvas').style; //鼠标的 X 和 Y 轴坐标 var x = 0; //邪恶的食指 $(el).mousedown(function (e){ //按下元素后,计算当前鼠标与对象计算后的坐标 x = e.clientX - el.offsetWidth - $("#admin-offcanvas").width(); //在支持 setCapture 做些东东, //捕捉焦点,//设置事件 el.setCapture ? (el.setCapture(),el.onmousemove = function (ev){ mouseMove(ev || event);},el.onmouseup = mouseUp) : ( //绑定事件 $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)); //防止默认事件发生 e.preventDefault(); }); //移动事件 运算中... function mouseMove(e){ els.width = e.clientX - x + 'px'; var left = e.clientX - x + 'px'; $("#rightbar").attr("style"," 5px;height: 100%;background: #cecece; z-index:999;cursor:e-resize;left: "+left+";position: absolute;"); $("#admin_content").attr("style","position: absolute;left: "+left+";top: 0;right: 0;bottom: 0;"); } //停止事件 function mouseUp(){ //在支持 releaseCapture 做些东东, //释放焦点, //移除事件 el.releaseCapture ? (el.releaseCapture(),el.onmousemove = el.onmouseup = null) : ( //卸载事件 $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)); } } var divResize=function(){ var totalHeight=$("html").height(); // console.log(totalHeight); var topHeight=$("#top").height(); $("#admin-offcanvas").height(totalHeight-topHeight); $("#rightbar").height(totalHeight-topHeight); }; $(function() { divResize(); $(window).resize(divResize); bindResize(document.getElementById('rightbar')); }); </script>
                <%--div 1--%>
                <div class="admin-sidebar am-offcanvas" id="admin-offcanvas" style="position: absolute;left: 0;top: 0; 20%;bottom: 0px;">
                内容div 1
                </div>
                <%--移动边框--%>
                <div id="rightbar" style=" 5px;height: 100%;background: #cecece; cursor: e-resize;z-index:999;left: 330px;position: absolute;"></div>
                <%--div 2--%>
                <div class="admin-content" id="admin_content" style="position: absolute;left: 20%;top: 0;right: 0;bottom: 0;">
                内容div 2
                </div>
  • 相关阅读:
    lamp
    mysql多实例部署
    mysql进阶
    rsync
    mysql基础
    httpd
    ftp
    高级命令之awk
    NFS
    网络进阶管理
  • 原文地址:https://www.cnblogs.com/czq520/p/12082376.html
Copyright © 2020-2023  润新知