Rumah >hujung hadapan web >tutorial js >Kaedah untuk melaksanakan kesan seretan lapisan yang boleh diseret dan dibesarkan dalam kemahiran Js_javascript

Kaedah untuk melaksanakan kesan seretan lapisan yang boleh diseret dan dibesarkan dalam kemahiran Js_javascript

WBOYasal: 2016-05-16 16:13:17994semak imbas

Contoh dalam artikel ini menerangkan kaedah pelaksanaan kesan seretan lapisan yang boleh diseret dan dibesarkan dalam JS. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Js实现层拖动效果，还可以拖拽放大

*{margin:0; padding:0;}
#zhezhao{
lebar:100%;
ketinggian:100%;
latar belakang:#f00;
filter:alpha(opacity:0);
kelegapan:0;
indeks-z:9999;
kedudukan:mutlak;
atas:0;
kiri:0;
paparan:tiada;
}
#div2{
lebar:200px;
ketinggian:200px;
jawatan:saudara;
latar belakang:#EEEEEE;
sempadan:1px pepejal #f00;
}
#div1{
lebar:15px;
ketinggian:15px;
latar belakang:#99CC00;
kedudukan:mutlak;
kanan:0px;
bawah:0px;
kursor:nw-resize;
limpahan:tersembunyi;
saiz fon:12px;
text-align:center;
ketinggian garis:15px;
warna:#FFFFFF;
float:right;
indeks-z:3;
}
#betul{
lebar:15px;
ketinggian:100%;
latar belakang:#f00;
float:right;
kedudukan:mutlak;
betul:0;
atas:0;
kursor:e-resize;
limpahan:tersembunyi;
filter:alpha(opacity:0);
kelegapan:0;
indeks-z:1;
}
#bawah{
lebar:100%;
ketinggian:15px;
latar belakang:#f00;
kedudukan:mutlak;
kiri:0;
bawah:0;
kursor:n-ubah saiz;
limpahan:tersembunyi;
filter:alpha(opacity:0);
kelegapan:0;
indeks-z:1;
}
#div2 p{
padding:10px;
ketinggian garis:24px;
saiz fon:13px;
inden teks:24px;
warna:#996600;
}
#div2 h2{
lebar:100%;
ketinggian:25px;
ketinggian garis:25px;
saiz fon:14px;
latar belakang:#CC9900;
warna:#FFFFFF;
inden teks:15px;
kursor:move;
limpahan:tersembunyi;
}