ホームページ >ウェブフロントエンド >jsチュートリアル >js ドラッグ可能な背景インターフェイスページの背景

js ドラッグ可能な背景インターフェイスページの背景

WBOYオリジナル: 2016-05-16 19:02:191076ブラウズ

// ************************ ドラッグ ********************** * **********
function setDrag(e){
varrag_flag = true;
var begin_x = getX(e);
//マスクを追加
createMask( );
return (e.x || e.clientX); = $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;

}
function createMask(){
try{

🎜>rootEl.clientHeight:rootEl.scrollHeight) " px";
var docWidth=((rootEl. clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)
"px";
var var
shieldStyle="position:Absolute;top:0px;left:0px;width:" docWidth " ;高さ:" docHeight ";background:#cccccc;z-
index:10000;filter:alpha(opacity=0);opacity:0";
var _shield = document.createElement("div");
_shield.id = "シールド";
_shield.style.cssText = ShieldStyle;
document.body.appendChild(_shield);
catch(e){}
}
//ドラッグ時に実行される関数
document.onmousemove = function(e){
try{
if(drag_flag){
var now_x = getX(e); = parseInt($doc("splitDiv").style.left) now_x - begin_x;
$doc("splitDiv").style.left = _pv "px";
Begin_x =
} else{ Child($doc("shield")); age()

document.onmouseup = function(){
try{
if(drag_flag){
width)
$doc("leftShow").style.width = $doc("splitDiv").style.left;
document.body; .removeChild($doc("shield"));
document.body.removeChild ($doc("splitDiv"));
drag_flag=false; ){}
}

}

if(window.attachEvent){
window.attachEvent("onload",function(){resizePage();});
window.attachEvent("onresize", function() {resizePage();});resizePage();},true);
window.addEventListener("resize",function(){resizePage();},true);

.f_left{ 
    float:left; 
    clear:right; 
} 
.f_right{ 
    float:right ; 
    clear:right; 
} 
.topArea{ 
    width:100%; 
    height:60px; 
} 
.logoArea{ 
  float:left; 
  width:100%; 
  height:36px; 
  background-color:#EEEEEF; 
} 
.toolbarArea{ 
  float:left; 
  width:100%; 
  height:24px; 
  background-color:#EEEEEF; 
} 
.bottomArea{ 
    height:25px; 
    line-height:25px; 
  background-color:#EEEEEF ; 
} 
.leftBg{ 
    background:#ffffff; 
    border:1px solid #BEBEBE; 
} 
.mainContent{ 
  padding:0px; 
} 
.content_show{ 
    float:left; 
    clear:right; 
    height:100%; 
    width:auto; 
    margin:0px; 
    padding:0px; 
    background-color:#ffffff; 
    border:1px solid #BEBEBE; 
}

.splitBar{ 
  width:6px; 
  height:100%; 
    cursor:col-resize; 
}     
</style>

</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js は行を削除し、ダブルクリックしてテキストボックスを変更するスクリプトを追加します_javascript スキル次の記事：js は行を削除し、ダブルクリックしてテキストボックスを変更するスクリプトを追加します_javascript スキル

続きを見る

js ドラッグ可能な背景 インターフェイスページの背景

関連記事

js ドラッグ可能な背景インターフェイスページの背景