Rumah > Artikel > hujung hadapan web > jQuery melaksanakan kesan menu navigasi senarai ringkas code_jquery

jQuery melaksanakan kesan menu navigasi senarai ringkas code_jquery

WBOYasal: 2016-05-16 15:41:321168semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jQuery kod kesan menu navigasi senarai ringkas. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

JQuery digunakan di sini untuk melaksanakan menu navigasi senarai ringkas Ia ditulis semasa membaca berdasarkan tutorial di Internet Ia telah diubah suai dan boleh digunakan selepas menyalin kod. Pelaksanaan utama merangkumi tiga bahagian, satu ialah CSS, satu lagi memperkenalkan jQuery, dan yang ketiga ialah menulis kod JS untuk melaksanakan kawalan jQuery.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/

Kod khusus adalah seperti berikut:

<html>
<head>
<title>jQuery实现简单的列表导航菜单</title>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<style type="text/css">
body{font-size:13px}
ul,li{list-style-type:none;padding:0px;margin:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
 .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
 .content{padding-top:10px;clear:left}
 a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px}
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
.tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
background-color:#fff;display:none}
.tip li{line-height:23px;}
#sort{position:absolute;display:none}
</style>
 <script type="text/javascript">
 $(function() {
  var curY; //获取所选项的Top值
  var curH; //获取所选项的Height值
  var curW; //获取所选项的Width值
  var srtY; //设置提示箭头的Top值
  var srtX; //设置提示箭头的Left值
  var objL; //获取当前对象
  /*
  *设置当前位置数值
  *参数obj为当前对象名称
  */
  function setInitValue(obj) {
  curY = obj.offset().top
  curH = obj.height();
  curW = obj.width();
  srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
  srtX = curW - 5 + "px"; //设置提示箭头的Left值
  }
  $(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件
  objL = $(this); //获取当前对象
  setInitValue(objL); //设置当前位置
  var allY = curY - curH + "px"; //设置提示框的Top值
  objL.addClass("optnFocus"); //增加获取焦点时的样式
  objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标
  $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
  })
  .mouseout(function() {//设置当前所选项的鼠标移出事件
  $(this).removeClass("optnFocus"); //删除获取焦点时的样式
  $(this).next("ul").hide(); //隐藏提示框
  $("#sort").hide(); //隐藏提示箭头
  })
  $(".tip").mousemove(function() {
  $(this).show(); //显示提示框
  objL = $(this).prev("li"); //获取当前的上级li对象
  setInitValue(objL); //设置当前位置
  objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
  $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
  })
  .mouseout(function() {
  $(this).hide(); //隐藏提示框
  $(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式
  $("#sort").hide(); //隐藏提示箭头
  })
 })
 </script>
 </head>
<body>
<ul>
 <li class="menu">
  <div>
   <img alt="" src="images/icon.gif" />
   <span>精品源码下载社区</span>
  </div>
  <ul class="content">
  <li class="optn"><a href="#">Visual C#</a></li>
  <ul class="tip">
   <li><a href="#">数据库</a></li>
   <li><a href="#">系统控制</a></li>
   <li><a href="#">多媒体</a></li>
   <li><a href="#">字符处理</a></li>
   <li><a href="#">打印输出</a></li>
  </ul>
  <li class="optn"><a href="#">Delphi</a></li>
  <ul class="tip">
   <li><a href="#">图像处理</a></li>
   <li><a href="#">窗体设计</a></li>
   <li><a href="#">数据库应用</a></li>
   <li><a href="#">初学实例</a></li>
  </ul>
  <li class="optn"><a href="#">VC++</a></li>
  <ul class="tip">
   <li><a href="#">系统控制</a></li>
   <li><a href="#">数据库应用</a></li>
   <li><a href="#">电脑软件3</a></li>
   <li><a href="#">字符处理</a></li>
   <li><a href="#">电脑软件5</a></li>
  </ul>
  <li class="optn"><a href="#">VisualBasic</a></li>
  <ul class="tip">
   <li><a href="#">系统控制</a></li>
   <li><a href="#">网络编程</a></li>
   <li><a href="#">窗口界面</a></li>
   <li><a href="#">控件组件</a></li>
   <li><a href="#">图像编程</a></li>
  </ul>
  </ul>
  <img id="sort" src="images/sort.gif" alt=""/>
  </li>
 </ul>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

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 sebelumnya：Penjelasan terperinci tentang penggunaan kaedah sort() dalam kemahiran javascript_javascriptArtikel seterusnya：Penjelasan terperinci tentang penggunaan kaedah sort() dalam kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi