Web-Frontend
js-Tutorial
JS CSS realisiert den Schiebetüreffekt mit kleinen Dreiecksführungs-Javascript-Fähigkeiten
JS CSS realisiert den Schiebetüreffekt mit kleinen Dreiecksführungs-Javascript-Fähigkeiten
Das Beispiel in diesem Artikel beschreibt die JS-CSS-Implementierung des Schiebetüreffekts mit kleiner Dreiecksführung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist eine JS-CSS-Schiebetür mit einer kleinen Dreiecksführung. Einige Freunde sagten, dass der Effekt unter IE6 nicht sichtbar sei, weil die Farbe des kleinen Dreiecks relativ hell sei, und manchmal auch Aufgrund des Monitors ist es schwierig, diese Farbe zu erkennen. Mit der dreieckigen Führung ist die Struktur der gesamten Schiebetür klarer und die Führung ist vernünftiger.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/
Der spezifische Code lautet wie folgt:
<!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>Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie kann ich index.css -Datei mit Element UI ordnungsgemäß einführen und Stilladungsfehler vermeiden?
Apr 05, 2025 pm 02:33 PM
Best Practices über die Einführung von Elementui -Stildateien Viele Entwickler verwenden Element ...
Wie erhöht man die Höhe des Eingangselements und erzeugt den Text unten?
Apr 05, 2025 pm 02:51 PM
Wie erhöht man die Höhe des Eingangselements und erzeugt den Text unten? Wenn wir die Höhe des Eingabeelements im Webdesign anpassen müssen und hoffen, dass der Text darin ...
Wie löste ich das Problem des Seitenscrollens, nachdem die Softtastatur des Browsers Mobile Edge aufgetaucht ist?
Apr 05, 2025 pm 02:57 PM
In Bezug auf die Edge -Browser -Eingangsmethode, die Seitenhöhe und das Scrollen nach dem Auftauchen der Tastatur. Wenn Sie den Edge -Browser auf Ihrem Mobiltelefon verwenden, stößt die Seite häufig auf dieses Problem: � ...
Wie zeichne ich eine bestimmte Form mit einer orangefarbenen Hintergrundfarbe mit CSS 'Clip-Pfad-Eigenschaft?
Apr 05, 2025 pm 04:36 PM
Praktische Anwendungsfälle von CSS -Zeichnungsfunktion im modernen Webdesign können CSS nicht nur für Layout und Stil, sondern auch für das Erstellen komplexer Grafiken und Animationen verwendet werden. Mai...
Wie füge ich das Laden von Animationen zum A -Tag hinzu und springe dann?
Apr 05, 2025 pm 04:48 PM
Implementieren Sie die kurze Animation geschickt und springen Sie nach dem Klicken auf das A -Tag. Wir hoffen oft, dass die Seite nach dem Klicken auf das A -Tag zuerst ein kurzes Ladeereignis anzeigen kann ...
Was ist die & lt; Figur & gt; Element in CSS für?
Apr 05, 2025 pm 04:51 PM
Wofür sind die Elemente in CSS? Während des Lernens und der Verwendung von CSS können Sie auf weniger häufige HTML -Elemente wie & lt ...
Wie verwende ich lokal installierte 'Jingnanmai -Round' auf einer Webseite, ohne die Schriftart zu laden?
Apr 05, 2025 pm 04:54 PM
So verwenden Sie lokal installierte Schriftdateien auf Webseiten in der Webentwicklung, manchmal werden wir auf die Situation stoßen, in der wir bestimmte Schriftarten verwenden müssen, die auf unserem Computer installiert sind ...
Wie kann man den Schwebeffekt von zusammengeführten Zeilen in El-Table von Element UI anpassen?
Apr 05, 2025 pm 03:24 PM
So passen Sie den EL-Table Merge-Hover-Effekt an, wenn Sie Element verwenden ...
