javascript2014-08-09 19:47:20 4978
纯Javascript制作的页面分割,将页面分为3个部分:左上,右上,底部。可以自由拖动拉大或者缩小某个区域的大小。也可以规定每个区域的最小大小,防止过小后影响效果。
源代码:
动态分割左上宽度:" Math.round(SliderHandler.SliderTopLeftWidth) "px右上宽度:" Math.round(SliderHandler.SliderTopRightWidth) "px"; }, SliderHorizontal: function() { document.body.onselectstart = function() { return false; }; document.getElementById("SliderVertical").addEventListener("mousedown", function(event) { document.body.onmousemove = function(event) { SliderHandler.SliderMoving == false ? SliderHandler.SliderHorizontalMove(event) : SliderHandler.SliderHorizontalMoving(event); } document.body.onmouseup = function(BodyOnMouseUpEvent) { document.body.onmousemove = function() { return false; }; if (SliderHandler.SliderMoving == false) { SliderHandler.SliderTopLeftWidth = document.getElementById("SliderVertical").offsetLeft; document.getElementById("Top_left").style.width = SliderHandler.SliderTopLeftWidth "px"; document.getElementById("Top_right").style.width = document.documentElement.clientWidth - SliderHandler.SliderTopLeftWidth "px"; } } }, false); document.getElementById("SliderHorizontal").addEventListener("mousedown", function(event) { document.body.onmousemove = function(event) { SliderHandler.SliderMoving == false ? SliderHandler.SliderVerticalMove(event) : SliderHandler.SliderVerticalMoving(event); } document.body.onmouseup = function(BodyOnMouseUpEvent) { document.body.onmousemove = function() { return false; }; if (SliderHandler.SliderMoving == false) { document.getElementById("Top").style.height = document.getElementById("SliderHorizontal").offsetTop "px"; document.getElementById("Bottom").style.height = document.documentElement.clientHeight - document.getElementById("SliderHorizontal").offsetTop "px"; document.getElementById("SliderVertical").style.height = document.getElementById("SliderHorizontal").offsetTop "px";; document.getElementById("Top_right").style.width = document.documentElement.clientWidth - SliderHandler.SliderTopLeftWidth "px"; } } }, false); }, SliderHorizontalMoving: function(event) { SliderHandler.SliderMoving = true; var CurrentSliderVerticalX = event.pageX; var CurrentCursorX = event.clientX document.body.scrollLeft document.documentElement.scrollLeft; var CurrentMoveDistance = CurrentCursorX - SliderHandler.SliderTopLeftWidth; SliderHandler.SliderTopLeftWidth = SliderHandler.SliderTopLeftWidth CurrentMoveDistance; SliderHandler.SliderTopRightWidth = document.documentElement.clientWidth - SliderHandler.SliderTopLeftWidth; if (SliderHandler.SliderTopRightWidth 动态分割左上宽度:" Math.round(SliderHandler.SliderTopLeftWidth CurrentMoveDistance) "px右上宽度:" Math.round(SliderHandler.SliderTopRightWidth - CurrentMoveDistance) "px"; }, SliderHorizontalMove: function(event) { SliderHandler.SliderMoving = false; var CurrentSliderVerticalX = event.pageX; var CurrentCursorX = event.clientX document.body.scrollLeft document.documentElement.scrollLeft; if (CurrentCursorX = document.documentElement.clientWidth - SliderHandler.SliderMiniWidth) return; var CurrentMoveXDistance = CurrentCursorX - SliderHandler.SliderTopLeftWidth; document.getElementById("SliderVertical").style.marginLeft = SliderHandler.SliderTopLeftWidth CurrentMoveXDistance "px"; }, SliderVerticalMoving: function(event) { SliderHandler.SliderMoving = true; var CurrentSliderHorizontalY = event.pageY; var CurrentCursorY = event.clientY document.body.scrollTop document.documentElement.scrollTop; if(CurrentCursorY=document.documentElement.clientHeight-SliderHandler.SliderMiniHeight)return; var CurrentMoveYDistance = CurrentCursorY - SliderHandler.SliderTopHeight; SliderHandler.SliderTopHeight = SliderHandler.SliderTopHeight CurrentMoveYDistance; SliderHandler.SliderBottomHeight = document.documentElement.clientHeight - SliderHandler.SliderTopHeight; document.getElementById("Top").style.height = SliderHandler.SliderTopHeight "px"; document.getElementById("Bottom").style.height = SliderHandler.SliderBottomHeight "px"; document.getElementById("SliderVertical").style.height = SliderHandler.SliderTopHeight "px";; document.getElementById("SliderHorizontal").style.top = SliderHandler.SliderTopHeight "px"; }, SliderVerticalMove: function(event) { SliderHandler.SliderMoving = false; var CurrentSliderHorizontalY = event.pageY; var CurrentCursorY = event.clientY document.body.scrollTop document.documentElement.scrollTop; if(CurrentCursorY=document.documentElement.clientHeight-SliderHandler.SliderMiniHeight)return; var CurrentMoveYDistance = CurrentCursorY - SliderHandler.SliderTopHeight; document.getElementById("SliderHorizontal").style.top = SliderHandler.SliderTopHeight CurrentMoveYDistance "px"; } } " _ue_custom_node_="true">
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Javascript页面分割,Html页面分割,Javascript上下分割页面
文章固定链接:https://www.pengyaou.com/legendsz/front/codejs/Mjg=.html
上一篇 Html投票插件
下一篇 Jq二级联动导航菜单