ホームページ > 記事 > ウェブフロントエンド > JavaScript は、QQ スペースのパーソナライズされた編集モジュールと同様の div のドラッグとサイズ変更を実装します_その他の特殊効果
JavaScript は、QQ スペースのパーソナライズされた編集モジュールと同様の div のドラッグとサイズ変更を実装します_その他の特殊効果
- WBOYオリジナル
- 2016-05-16 17:46:371183ブラウズ
QQ スペースを頻繁に訪問する友人は、QQ スペースのパーソナライズされた編集モジュールに深い感銘を受けるはずです。ページ上の要素をドラッグしてサイズを調整して、動的なレイアウトを実現できます。もちろん、私も csdn ブログにアクセスするたびにそうします。右下隅のニュース ウィンドウを参照してください。この効果は非常に優れています。
実装手順: まず、同様の HTML 構造を動的に作成します。これに:
コードをコピー コードは次のとおりです:
< ;span id="move" style="width:90%;height:100%">
閉じる
< ;/div>
2. body の ID を持つ div コンテナーは、コンテンツを配置する div コンテナーであり、move は移動可能なスパンです。 close はウィンドウ (正確にはレイヤー) を閉じることです。
のコードを具体的に確認します。コード コードは次のとおりです:
sx.activex.windowex={ init:function(step,t,html){
var a=document.createElement("div");
var head=document.createElement("div");
var move=document.createElement("span"); createElement("span");
close.innerText="閉じる";
head.appendChild(move);
a.appendChild(頭);
a.style.height="200px"; 🎜>a.style.overflow="hidden";
a.style.border="1px 赤ソリッド";
head.style.backgroundColor="blue"; 5%";
move.style.width="90%";
move.style.height="100%";
close.style.height="100%";
閉じる.style.overflow="hidden";
close.style.whiteSpace="nowrap";
body.style.height="93%"; 🎜>body.style.width="100%";
body.style.overflow="auto";
a.style.position="absolute"; ";
close.style.cursor="hand";
close.style.top =0 "px";
close.style.right=0 "px";
close.onclick= function(){
window.event.cancelBubble=true;
var q=a.offsetHeight;
var h=window.setInterval(function(){
if(Math.abs(q)) >=0){
a.style.height=q "px";
q=q-step;
if(Math.abs(q)// e.style.height=q "px";
window.clearInterval(h);
//window.setTimeout(function(){
//alert(this==window);
close.style.cursor="normal";
a.parentNode.removeChild(a)>//a.style.lineHeight="0px"; }
}else{
window.clearInterval(h)
//a .style.display="none";
}
; >move.onmousedown=function(){
this.move=1;
//alert(this.x); window.event.offsetY;
this.setCapture();
move .onmouse=function(){
this.style.cursor="move"; event.clientX<=0 || window.event.clientY<=0 || window.event.clientX>=document.body.clientWidth || window.event.clientY>=document.body.clientHeight){return false;}
if(this.move==1){
this.parentNode.parentNode.style.left=window.event.clientX-this.x "px"; .style.top=window.event.clientY-this.y "px";
this.setCapture();
}
move.onmouseup=function(){
if (this.move==1){
this.move=0;
// this.style.cursor="normal";
this.releaseCapture();
a.onmousemove=function(){
if(this.move==1) {
if(window.event.clientX-this.offsetLeftthis.style.width=window.event.clientX-this .offsetLeft "px";
this.style.height=window.event.clientY-this.offsetTop "px"; ;
close.style.right="0px";
this.setCapture();
else{
if(window.event.offsetX-this.offsetWidth> window.event.offsetY-this.offsetHeight>-6)
this.style.cursor=" nw-resize";
else
this.style.cursor="default";
}
a.onmouseup=function(){
if(this.move= =1){
this.move=0;
this.releaseCapture();
🎜>}
a.onmousedown=function(){
if(this.style.cursor=="nw-resize"){
this.move=1;
this.setCapture() ;
}
}
body.innerHTML=html;
}
コードは複雑ではありません。主に onmousedown、onmousemove、onmouseup を記述することで構成されています。マウスをレイヤーの右下隅に移動すると、マウス ポインタが変化します。マウスを移動すると、現在のレイヤーが Setcapture されます。マウスを移動すると、マウスの位置に応じてレイヤーのサイズが変更されます。
関数のパラメーター ステップは数値です。閉じるを押したときに各時間間隔で移動するステップの数。t は時間です。html は本文レイヤーに挿入する HTML コードです。
です。
>
var a=document.createElement("div");
var head=document.createElement("div");
var move=document.createElement("span"); createElement("span");
close.innerText="閉じる";
head.appendChild(move);
a.appendChild(頭);
a.style.height="200px"; 🎜>a.style.overflow="hidden";
a.style.border="1px 赤ソリッド";
head.style.backgroundColor="blue"; 5%";
move.style.width="90%";
move.style.height="100%";
close.style.height="100%";
閉じる.style.overflow="hidden";
close.style.whiteSpace="nowrap";
body.style.height="93%"; 🎜>body.style.width="100%";
body.style.overflow="auto";
a.style.position="absolute"; ";
close.style.cursor="hand";
close.style.top =0 "px";
close.style.right=0 "px";
close.onclick= function(){
window.event.cancelBubble=true;
var q=a.offsetHeight;
var h=window.setInterval(function(){
if(Math.abs(q)) >=0){
a.style.height=q "px";
q=q-step;
if(Math.abs(q)
window.clearInterval(h);
//window.setTimeout(function(){
//alert(this==window);
close.style.cursor="normal";
a.parentNode.removeChild(a)>//a.style.lineHeight="0px"; }
}else{
window.clearInterval(h)
//a .style.display="none";
}
; >move.onmousedown=function(){
this.move=1;
//alert(this.x); window.event.offsetY;
this.setCapture();
move .onmouse=function(){
this.style.cursor="move"; event.clientX<=0 || window.event.clientY<=0 || window.event.clientX>=document.body.clientWidth || window.event.clientY>=document.body.clientHeight){return false;}
if(this.move==1){
this.parentNode.parentNode.style.left=window.event.clientX-this.x "px"; .style.top=window.event.clientY-this.y "px";
this.setCapture();
}
move.onmouseup=function(){
if (this.move==1){
this.move=0;
// this.style.cursor="normal";
this.releaseCapture();
a.onmousemove=function(){
if(this.move==1) {
if(window.event.clientX-this.offsetLeftthis.style.width=window.event.clientX-this .offsetLeft "px";
this.style.height=window.event.clientY-this.offsetTop "px"; ;
close.style.right="0px";
this.setCapture();
else{
if(window.event.offsetX-this.offsetWidth> window.event.offsetY-this.offsetHeight>-6)
this.style.cursor=" nw-resize";
else
this.style.cursor="default";
}
a.onmouseup=function(){
if(this.move= =1){
this.move=0;
this.releaseCapture();
🎜>}
a.onmousedown=function(){
if(this.style.cursor=="nw-resize"){
this.move=1;
this.setCapture() ;
}
}
body.innerHTML=html;
}
コードは複雑ではありません。主に onmousedown、onmousemove、onmouseup を記述することで構成されています。マウスをレイヤーの右下隅に移動すると、マウス ポインタが変化します。マウスを移動すると、現在のレイヤーが Setcapture されます。マウスを移動すると、マウスの位置に応じてレイヤーのサイズが変更されます。
関数のパラメーター ステップは数値です。閉じるを押したときに各時間間隔で移動するステップの数。t は時間です。html は本文レイヤーに挿入する HTML コードです。
です。
コードをコピーします ;title>無題ドキュメント