masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 苹果开关按钮效果_html/css_WEB-ITnose

苹果开关按钮效果_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:46:48
asal
1213 orang telah melayarinya

苹果开关按钮效果~~

关闭时                                      开启时 

 

html code

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>apple button</title></head><body>    <div id="div1" class="open1">        <div id="div2" class="open2"></div>    </div></body></html>
Salin selepas log masuk

css code

#div1{        width: 170px;        height: 100px;        border-radius: 50px;        position: relative;    }    #div2{        width: 96px;        height: 96px;        border-radius: 48px;        position: absolute;        background: white;        box-shadow: 0px 2px 4px rgba(0,0,0,0.4);    }    .open1{        background: rgba(0,184,0,0.8);    }    .open2{        top: 2px;        right: 1px;    }    .close1{        background: rgba(255,255,255,0.4);        border:3px solid rgba(0,0,0,0.15);        border-left: transparent;    }    .close2{        left: 0px;        top: 0px;        border:2px solid rgba(0,0,0,0.1);    }
Salin selepas log masuk

javascript code

window.onload=function(){        var div2=document.getElementById("div2");        var div1=document.getElementById("div1");        div2.onclick=function(){          div1.className=(div1.className=="close1")?"open1":"close1";          div2.className=(div2.className=="close2")?"open2":"close2";        }    }
Salin selepas log masuk

 

Label berkaitan：
苹果开关按钮效果
sumber：php.cn
Artikel sebelumnya：CSS实例练习_html/css_WEB-ITnose Artikel seterusnya：CSS(一)_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
isu jQuery.remove() dan array.splice(). Jadi saya mempunyai halaman yang mempunyai senarai item dan senarai beli-belah. Jika anda ...
daripada 2024-04-04 17:21:35
0
1
347
Buat kesan hover yang mengubah butang menu menjadi bentuk x dengan versi klon berbayang Pertama saya ingin mengakui bahawa tajuk saya mengelirukan dan saya minta maaf untuk itu. ...
daripada 2024-04-04 11:55:21
0
2
315
Masalah peralihan kabur penapis tanah Menekan butang mengaburkan latar belakang, tetapi apabila beralih, tepi div tidak beralih ...
daripada 2024-04-01 23:10:22
0
1
335
Alih keluar kesan tuding daripada butang serah dan tetapkan semula: panduan langkah demi langkah Apakah arahan yang perlu saya gunakan untuk menjadikannya tidak berskala apabila saya meng...
daripada 2024-04-01 22:32:31
0
1
333
Pengaktifan butang menyebabkan kesan hover tidak berfungsi Saya telah cuba mempelajari asas pembangunan web (HTML, CSS dan JS), jadi saya telah cuba ...
daripada 2024-04-01 21:51:26
0
1
396
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan