JS CSSは小さな三角形のガイダンス_JavaScriptスキルで引き戸効果を実現します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS CSSは小さな三角形のガイダンス_JavaScriptスキルで引き戸効果を実現します

May 16, 2016 pm 03:38 PM

css js 引き戸

この記事の例では、小さな三角形のガイダンスを使用した引き戸効果の JS CSS 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは、小さな三角形のガイドを備えた JS CSS スライドドアです。一部の友人は、IE6 では効果が見られないと言いました。実際、小さな三角形の色が比較的明るいため、見えることがあります。モニターのせいで見えにくいですが、実際には、この色を変更するだけで、スライドドア全体の構造がより明確になり、ガイドがより合理的になります。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/

具体的なコードは次のとおりです:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;滑动门&lt;/title&gt;
&lt;style type="text/css"&gt;
*{ 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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="tabsBox"&gt;
 &lt;ul id="Tabs" class="tabs"&gt;
  &lt;li class="cur"&gt;最新更新&lt;span&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;推荐下载&lt;span&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;下载排行&lt;span&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;本月排行&lt;span&gt;&lt;/span&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;div id="TabsCon" class="cons"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" target="_blank"&gt;基于JavaScript的气泡提示网页版&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;C#调用OFFICE组件生成Excel表格示例&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;iFrame 框架在多页面间相互传值的实例&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;高亮显示代码的在线编辑器ASP.NET版&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;《Java2核心技术卷2:高级特性》第7版中文高清 PDF&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;VB餐厅POS收银软件&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;VB餐厅POS收银软件&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;VB 6.0 简体中文标准版&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;Delphi加密隐藏或还原Windows盘符驱动器&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;ImageVue 2.0 PHP+FLASH+XML高级相册&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;VB商品零售进销存程序含MSSQL数据库文件&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;jQuery 模块拖动，拖动层效果，可淡入淡出&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;jQuery单行新闻滚动&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;经典的jQuery多行文本滚动&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;JS图片切换学习版，没有过多修饰&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;漂浮广告代码，Js演示&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;边滚边停的JS图片滚动&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;递归读取数据库创建树控菜单的Delphi例子&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;VB抓取DLL或EXE应用程序内的图标资源&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;jQuery StartStopSlider 滚动切换插件&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;jQuery EasyUI 实例演示（菜单、TAB等）&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" target="_blank"&gt;VB+SQL2000考试卷（题库）生成与管理系统&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
 var lis = document.getElementById("Tabs").getElementsByTagName("li");
 var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
 var order = 0;
 for(var i=0; i&lt;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";
 }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この記事が皆さんの JavaScript プログラミングに役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。