Bagaimana untuk membuat dua gambar bertindih dalam javascript

JavaScript ialah bahasa pengaturcaraan web yang biasa digunakan yang boleh digunakan untuk mencapai kesan dinamik dan fungsi interaktif pada halaman web. Dalam reka bentuk web, selalunya perlu menambah elemen grafik pada halaman web untuk mencantikkan halaman, dan jika dua grafik bertindih, beberapa kesan khas juga boleh dihasilkan. Jadi, bagaimana untuk membuat dua grafik bertindih dalam JavaScript? Mari kita bincangkan isu ini bersama-sama.

1. Bertindih dua grafik melalui CSS

Dalam CSS, terdapat sifat yang dipanggil "kedudukan", yang digunakan untuk menentukan kaedah kedudukan elemen dalam dokumen, termasuk statik, relatif , Kaedah mutlak, tetap dan lain-lain. Jika anda ingin bertindih dua grafik, anda boleh melakukannya dengan mengubah suai atribut "kedudukan" elemen. Operasi khusus adalah seperti berikut:

1. Tambahkan dua elemen grafik pada halaman HTML.

<div id="box1">图形1</div>
<div id="box2">图形2</div>

2. Tetapkan gaya dua elemen grafik dalam CSS, termasuk lebar, tinggi, warna dan atribut lain.

#box1 {
    width: 200px;
    height: 200px;
    background-color: red;
}

#box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
}

3. Letakkan elemen pada kedudukan yang ditentukan dengan mengubah suai atribut "kedudukan".

#box1 {
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    z-index: 1;
}

#box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

Dalam kod di atas, kami menetapkan atribut "kedudukan" elemen "kotak1" kepada "relatif", yang bermaksud bahawa kedudukan elemen diposisikan secara relatif kepada kedudukan asalnya; position" atribut elemen ditetapkan kepada "mutlak", yang bermaksud bahawa elemen diletakkan relatif kepada elemen induknya. Kemudian, kami menetapkan sifat "atas" dan "kiri" bagi elemen "kotak2" untuk meletakkannya tepat di tengah-tengah elemen "kotak1". Memandangkan nilai atribut "z-index" bagi elemen "box2" pada paksi "z" ialah 2 dan nilai atribut "z-index" bagi elemen "box1" ialah 1, elemen "box2" akan dipaparkan pada "kotak1" di atas elemen, sekali gus mencapai kesan bertindih kedua-dua elemen.

2. Bertindih dua grafik melalui JavaScript

Selain daripada bertindih dua grafik melalui CSS, kami juga boleh melaksanakannya melalui JavaScript. Pendekatan khusus adalah untuk mencipta dua elemen secara dinamik melalui JavaScript dan menambahkannya ke halaman. Kemudian, tindih kedua-dua elemen dengan mengubah suai gaya mereka. Operasi khusus adalah seperti berikut:

1. Tambahkan elemen bekas pada halaman HTML sebagai elemen induk bagi elemen yang ditambah secara dinamik.

<div id="container"></div>

2 Gunakan JavaScript untuk mencipta dua elemen secara dinamik dan menetapkan gaya serta kandungannya.

// 创建元素
var box1 = document.createElement('div');
var box2 = document.createElement('div');

// 设置内容和样式
box1.innerHTML = '图形1';
box1.style.width = '200px';
box1.style.height = '200px';
box1.style.backgroundColor = 'red';

box2.innerHTML = '图形2';
box2.style.width = '100px';
box2.style.height = '100px';
box2.style.backgroundColor = 'blue';

3. Tambahkan dua elemen yang dicipta pada elemen bekas.

// 获取容器元素
var container = document.getElementById('container');

// 将元素添加到容器元素中
container.appendChild(box1);
container.appendChild(box2);

4 Bertindih dua elemen dengan mengubah suai gayanya.

// 设置位置和层级关系
box1.style.position = 'relative';
box2.style.position = 'absolute';
box2.style.top = '50px';
box2.style.left = '50px';
box2.style.zIndex = '2';

Dalam kod di atas, kami mula-mula mencipta dua elemen "box1" dan "box2" secara dinamik melalui JavaScript, kemudian menambahkannya pada elemen bekas dalam halaman. Seterusnya, kami menindih mereka dengan mengubah suai gaya mereka. Begitu juga, kami menetapkan atribut "kedudukan" elemen "kotak1" kepada "relatif", yang bermaksud bahawa elemen itu diposisikan secara relatif kepada kedudukan asalnya kami menetapkan atribut "kedudukan" elemen "kotak2" kepada "mutlak"; , yang bermaksud bahawa elemen diposisikan secara relatif kepada kedudukan asalnya berbanding dengan elemen induknya kedudukannya ke tengah tepat elemen "kotak1" melalui atribut "atas" dan "kiri", dan tetapkan "z-nya." index" pada paksi "z" kepada 2 , untuk muncul di atas elemen "box1".

3. Ringkasan

Melalui CSS dan JavaScript, kami boleh mencapai kesan bertindih dua grafik pada halaman web, menambahkan beberapa kesan visual khas dan deria artistik pada halaman web. Menggunakan kedua-dua kaedah memerlukan pengubahsuaian gaya elemen Kaedah yang dilaksanakan melalui JavaScript boleh menjadi lebih fleksibel dan boleh membina kesan dinamik dan interaksi. Memahami kesan CSS dan JavaScript pada kedudukan dan hubungan hierarki elemen boleh merealisasikan kreativiti dan kesan dengan lebih baik dalam reka bentuk web.

Atas ialah kandungan terperinci Bagaimana untuk membuat dua gambar bertindih dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!