hujung hadapan web
tutorial js
JS CSS merealisasikan kesan pintu gelangsar dengan kemahiran guidance_javascript segitiga kecil
JS CSS merealisasikan kesan pintu gelangsar dengan kemahiran guidance_javascript segitiga kecil
Contoh dalam artikel ini menerangkan pelaksanaan JS CSS bagi kesan pintu gelangsar dengan bimbingan segi tiga kecil. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah pintu gelangsar JS CSS dengan panduan segitiga kecil Beberapa rakan mengatakan bahawa kesannya tidak dapat dilihat di bawah IE6, ia boleh dilihat kerana warna segitiga kecil itu agak ringan sukar untuk melihatnya kerana monitor yang jelas, sebenarnya, anda boleh mengawal warna ini, hanya menukarnya dengan panduan segi tiga, struktur keseluruhan pintu gelongsor lebih jelas dan panduannya lebih munasabah.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/
Kod khusus adalah seperti berikut:
<!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>滑动门</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{
padding:30px;
}
.tabsBox{ width:400px; margin:20px auto;}
.tabs{ height:20px;}
.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs li span{ display:none;}
.tabs .cur{ background-color:#f0f0f0;}
.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.cons ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
</style>
</head>
<body>
<div class="tabsBox">
<ul id="Tabs" class="tabs">
<li class="cur">最新更新<span></span></li>
<li>推荐下载<span></span></li>
<li>下载排行<span></span></li>
<li>本月排行<span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="#" target="_blank">基于JavaScript的气泡提示网页版</a></li><li><a href="#" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li><li><a href="#" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li><li><a href="#" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li><li><a href="#" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="#" target="_blank">VB餐厅POS收银软件</a></li></ul>
<ul>
<li><a href="#" target="_blank">VB餐厅POS收银软件</a></li><li><a href="#" target="_blank">VB 6.0 简体中文标准版</a></li><li><a href="#" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li><li><a href="#" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li><li><a href="#" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
</ul>
<ul>
<li><a href="#" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li><li><a href="#" target="_blank">jQuery单行新闻滚动</a></li><li><a href="#" target="_blank">经典的jQuery多行文本滚动</a></li><li><a href="#" target="_blank">JS图片切换学习版，没有过多修饰</a></li><li><a href="#" target="_blank">漂浮广告代码，Js演示</a></li><li><a href="#" target="_blank">边滚边停的JS图片滚动</a></li></ul>
<ul>
<li><a href="#" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li><li><a href="#" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li><li><a href="#" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li><li><a href="#" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li><li><a href="#" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var lis = document.getElementById("Tabs").getElementsByTagName("li");
var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
var order = 0;
for(var i=0; i<lis.length; i++){
lis[i].value = i;
lis[i].onmouseover = function(){
ChangeTabs(this.value);
};
uls[i].className = "hidden";
}
lis[order].className = "cur";
uls[order].className = "block";
function ChangeTabs(nowTab){
lis[order].className = "";
uls[order].className = "hidden";
order = nowTab
lis[nowTab].className = "cur";
uls[nowTab].className = "block";
}
</script>
</body>
</html>Saya harap artikel ini akan membantu 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 memperkenalkan fail index.css elemen UI dan mengelakkan kegagalan pemuatan gaya?
Apr 05, 2025 pm 02:33 PM
Amalan terbaik mengenai pengenalan fail gaya elementui banyak pemaju menggunakan elemen ...
Bagaimana untuk meningkatkan ketinggian elemen input dan membuat teks di bahagian bawah?
Apr 05, 2025 pm 02:51 PM
Bagaimana untuk meningkatkan ketinggian elemen input dan membuat teks di bahagian bawah? Apabila kita perlu menyesuaikan ketinggian elemen input dalam reka bentuk web dan berharap teks di dalamnya ...
Bagaimana untuk menyelesaikan masalah menatal halaman selepas papan kekunci lembut pelayar tepi mudah alih muncul?
Apr 05, 2025 pm 02:57 PM
Mengenai kaedah input penyemak imbas Edge, ketinggian halaman dan menatal selepas papan kekunci muncul. Apabila menggunakan penyemak imbas Edge di telefon bimbit anda, halaman sering menemui masalah ini: � ...
Bagaimana untuk melukis bentuk tertentu dengan warna latar oren menggunakan harta klip-laluan CSS?
Apr 05, 2025 pm 04:36 PM
Kes -kes aplikasi praktikal fungsi lukisan CSS dalam reka bentuk web moden, CSS bukan sahaja boleh digunakan untuk susun atur dan gaya, tetapi juga untuk mewujudkan grafik dan animasi yang kompleks. ...
Bagaimana cara menambah animasi pemuatan ke klik tag dan kemudian melompat?
Apr 05, 2025 pm 04:48 PM
Secara bijak melaksanakan animasi pendek dan lompat selepas mengklik tag. Ramai kali, kami berharap bahawa selepas mengklik tag, halaman boleh terlebih dahulu memaparkan acara pemuatan pendek ...
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 cara menggunakan 'Jingnanmai Round' yang dipasang di laman web tanpa memuatkan fail fon?
Apr 05, 2025 pm 04:54 PM
Cara Menggunakan Fail Font Dipasang di Laman Web dalam Pembangunan Web, Kadang -kadang kita akan menghadapi situasi di mana kita perlu menggunakan fon tertentu yang dipasang di komputer kami ...
Bagaimana cara menyesuaikan kesan hover baris yang digabungkan dalam elemen elemen UI?
Apr 05, 2025 pm 03:24 PM
Cara menyesuaikan kesan hover gabungan el-meja semasa menggunakan elemen ...
