hujung hadapan web
tutorial js
Kaedah CSS JS untuk melaksanakan klik pada teks untuk muncul dan secara automatik menutup menu lapisan DIV pada selang masa yang tetap_kemahiran javascript
Kaedah CSS JS untuk melaksanakan klik pada teks untuk muncul dan secara automatik menutup menu lapisan DIV pada selang masa yang tetap_kemahiran javascript
Contoh dalam artikel ini menerangkan kaedah menggunakan CSS JS untuk menutup menu lapisan DIV secara automatik apabila mengklik pada teks. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:
Di sini kami menggunakan CSS JS untuk menghidupkan pengembangan menu lapisan DIV selepas mengklik pada teks, dan ia akan ditutup secara automatik apabila ia tamat tempoh. Ini adalah kesan yang dicapai dengan menggabungkan CSS dengan JS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS+JS弹出DIV层</title>
<script type="text/javascript">
var w = 0;
var h = 0;
var mout;
function emotion(){
var oMenu = document.getElementById("menu");
if(w <= 50){
oMenu.style.display = "block";
fnLarge();
}
else{
fnSmall();
}
}
function fnLarge(){
var oMenu = document.getElementById("menu");
if(w < 200){
w += 50;
h += 25;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnLarge()",10);
}
}
function fnSmall(){
var oMenu = document.getElementById("menu");
if(w > 0){
w -= 50;
h -= 25;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnSmall()",5);
}
else{
oMenu.style.display = "none";
}
}
</script>
<style type="text/css">
body{
text-align: center;
}
p{
cursor: pointer;
margin: 0;
padding: 0;
font-size: 24px;
display: inline;
}
div a:link, div a:visited{
color: #666;
text-decoration: none;
}
div a:hover{
color: #FF6600;
text-decoration: underline;
}
div{
border: 2px solid #666;
background: #fff;
margin: 5px auto;
overflow: hidden;
display: none;
padding: 5px 10px;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
width:70px;
}
li.title{
font-weight: bold;
}
</style>
</head>
<body>
<p onclick="emotion();">点击这行文字试试!</p>
<div id="menu"
onmouseout="javascript:mout=setTimeout('fnSmall()',2111);"
onMouseOver="javascript:clearTimeout(mout);">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" valign="top" align="left">
<ul>
<li class="title">ASP</li>
<li><a href="#" onclick="fnSmall();">新闻</a></li>
<li><a href="#" onclick="fnSmall();">论坛</a></li>
<li><a href="#" onclick="fnSmall();">CMS</a></li>
<li></li>
</ul></td>
<td width="80" valign="top" align="left">
<ul>
<li class="title">PHP</li>
<li><a href="#" onclick="fnSmall();">文章</a></li>
<li><a href="#" onclick="fnSmall();">聊天</a></li>
<li><a href="#" onclick="fnSmall();">插件</a></li>
<li><a href="#" onclick="fnSmall();">企业</a></li>
</ul>
</td>
<td width="80" valign="top" align="left">
<ul>
<li class="title">JSP</li>
<li><a href="#" onclick="fnSmall();">AJAX</a></li>
<li><a href="#" onclick="fnSmall();">JQUERY</a></li>
<li><a href="#" onclick="fnSmall();">MYSQL</a></li>
<li><a href="#" onclick="fnSmall();">JAVA</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana cara memaparkan 'badan bulat jingnan mai' yang dipasang dengan betul di laman web?
Apr 05, 2025 pm 10:33 PM
Menggunakan fail font yang dipasang di laman web baru -baru ini, saya memuat turun fon percuma dari internet dan berjaya memasangnya ke dalam sistem saya. Sekarang ...
Apakah fon yang dikodkan yang digunakan dalam gambar? Bagaimana cara menggunakan gaya fon ini dalam projek?
Apr 05, 2025 pm 05:06 PM
Pengenalan dan penggunaan fon yang dikodkan dalam pengaturcaraan dan reka bentuk web, memilih fon yang betul dapat meningkatkan kebolehbacaan dan estetika kod. Terkini, ...
Bagaimana cara menyesuaikan gaya hover dan logik baris yang digabungkan dalam elemen elemen?
Apr 05, 2025 pm 07:45 PM
Bagaimana untuk menyesuaikan gaya hover dan logik baris yang digabungkan di El-Table? Menggunakan elemen ...
Apa itu & lt; angka & gt; elemen dalam CSS untuk?
Apr 05, 2025 pm 04:51 PM
Apakah unsur -unsur dalam CSS? Semasa pembelajaran dan menggunakan CSS, anda mungkin menghadapi beberapa elemen HTML yang kurang biasa, seperti ...
Bagaimana untuk menyesuaikan kesan hover baris gabungan di El-Table?
Apr 05, 2025 pm 06:54 PM
Bagaimana untuk menyesuaikan kesan hover baris gabungan di El-Table? Menggunakan elemen ...
Bagaimana untuk mencapai kesan cincin dan maklumat cepat tetikus di bar kemajuan depan?
Apr 05, 2025 pm 07:54 PM
Bagaimana untuk mencapai kesan cincin dan tetikus mendorong di bar kemajuan depan? Semasa merancang bar kemajuan depan, bagaimana untuk mencapai kesan cincin dan pergerakan tetikus di tengah-tengah bar kemajuan ...
Bagaimana untuk membuat pelbagai baris teks sejajar dan garis bawah dengan CSS?
Apr 05, 2025 pm 08:00 PM
Bagaimana untuk membuat pelbagai baris teks sejajar dan garis bawah dengan CSS? Dalam reka bentuk web harian, kita sering perlu gaya pelbagai baris teks dalam gaya khas ...
Bagaimana cara menggunakan kumpulan peralihan reaksi untuk mencapai kesan penukaran komponen reaksi yang ketat dari kanan ke kiri?
Apr 05, 2025 pm 08:03 PM
Mengenai masalah menggunakan kumpulan peralihan React untuk mencapai kesan peralihan komponen dalam React. Apabila menggunakan projek pembangunan React, kita sering perlu melaksanakan beberapa aliran ...
