社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 主體

jquery實現左右滑動選單效果代碼_jquery

WBOY
發布： 2016-05-16 15:42:02
原創
1463 人瀏覽過

本文實例講述了jquery實作左右滑動選單效果碼。分享給大家供大家參考。具體如下：

這裡示範了三種背景顏色左右滑動jquery選單導航效果，IE下有問題，本選單使用了CSS3的部分屬性，因此建議使用火狐或Chrome等瀏覽器來取得最佳效果。當把滑鼠移到選單上的時候，對應選單項目的背景會變化，而且本選單具有圓角的效果。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/

具體程式碼如下：

<!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>
.webwidget_menu_glide{
 padding: 5px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -khtml-border-radius-topright: 10px;
 -khtml-border-radius-topleft: 10px;
 border-radius-topright: 10px;
 border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -moz-border-radius-bottomleft: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -khtml-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomleft: 10px;
 border-radius-bottomright: 10px;
 border-radius-bottomleft: 10px;
 border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
 width: 100px;
 height: 20px;
 background-color: fuchsia;
 position: absolute;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -khtml-border-radius-topright: 10px;
 -khtml-border-radius-topleft: 10px;
 border-radius-topright: 10px;
 border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -moz-border-radius-bottomleft: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -khtml-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomleft: 10px;
 border-radius-bottomright: 10px;
 border-radius-bottomleft: 10px;
 border-radius:10px;
}
.webwidget_menu_glide ul{
 padding: 0px;
 margin: 0px;
 font-family:Arial;
}
.webwidget_menu_glide ul li{
 float: left;
 list-style: none;
 position: relative;
 text-align: center;
 margin-right: 10px;
 width: 100px;
}
.webwidget_menu_glide ul li a{
 color: black;
 text-decoration: none;
 font-weight: bold;
}
.webwidget_menu_glide ul li ul{
 -moz-border-radius-bottomright: 7px;
 -moz-border-radius-bottomleft: 7px;
 -webkit-border-bottom-left-radius: 7px;
 -webkit-border-bottom-right-radius: 7px;
 -khtml-border-radius-bottomright: 7px;
 -khtml-border-radius-bottomleft: 7px;
 border-radius-bottomright: 7px;
 border-radius-bottomleft: 7px;
 border-radius:7px;
 padding-bottom: 5px;
 position: absolute;
 z-index: 999999;
 display: none;
}
.webwidget_menu_glide ul li ul li{
 -moz-border-radius-topright: 0px;
 -moz-border-radius-topleft: 0px;
 -webkit-border-top-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -khtml-border-radius-topright: 0px;
 -khtml-border-radius-topleft: 0px;
 border-radius-topright: 0px;
 border-radius-topleft: 0px;
 border-radius:0px;
 margin: 0px;
 float: none;
 border:none;
 word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
 padding-left: 5px;
 padding-right: 5px;
 font-weight: normal;
}
</style>
</link>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function(a){
 a.fn.webwidget_menu_glide=function(p){
  var p=p||{};
  var f=p&&p.menu_text_size&#63;p.menu_text_size:"12px";
  var g=p&&p.menu_text_color&#63;p.menu_text_color:"blue";
  var h=p&&p.menu_margin&#63;p.menu_margin:"10px";
  var i=p&&p.menu_width&#63;p.menu_width:"100px";
  var j=p&&p.menu_height&#63;p.menu_height:"20px";
  var k=p&&p.menu_sprite_color&#63;p.menu_sprite_color:"red";
  var l=p&&p.menu_background_color&#63;p.menu_background_color:"black";
  var m=p&&p.sprite_speed&#63;p.sprite_speed:"fast";
  f += "px";
  h += "px";
  i += "px";
  j += "px";
  var n=a(this);
  if(n.children("ul").length==0||n.find("li").length==0){
   n.append("Require menu content");
   return null
   }
   s_m(n.children("ul").children("li"),h,i,j);
  s_m_t_c(n.find("a"),g,j,f);
  n.css("background-color",l);
  if(n.children("ul").children("li").is(".current")){
   var o=n.children("ul").children("li").filter(".current").offset()
   }else{
   var o=n.children("ul").children("li:first").offset()
   }
   var q=o.left+'px';
  s_m_s_c(n.find(".webwidget_menu_glide_sprite"),k,i,j,q);
  n.children("ul").children("li").hover(function(){
   var b=$(this).offset();
   var c=b.left+'px';
   n.find(".webwidget_menu_glide_sprite").stop().animate({
    left:c
   },m)
   },function(){
   n.find(".webwidget_menu_glide_sprite").stop().animate({
    left:q
   },m)
   });
  n.children("ul").children("li").children("ul").children("li").hover(function(){},function(){});
  function s_m_t_c(a,b,c,d){
   a.css("color",b);
   a.css("line-height",c);
   a.css("font-size",d)
   }
   function s_m(a,b,c,d){
   style="margin-right:"+b+"; width: "+c+"; height: "+d+";";
   a.attr("style",style)
   }
   function s_m_s_c(a,b,c,d,e){
   a.css("background-color",b);
   a.css("width",c);
   a.css("height",d);
   a.css("left",e)
   }
  }
})(jQuery);
</script>
</head>
<body>
<table width="600">
 <tr>
 <td><h2>Demo1</h2>
  <br/>
  <br/>
  <script language="javascript" type="text/javascript">
   $(function() {
    $("#webwidget_menu_glide1").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide1" });
   });
  </script>
  <div id="webwidget_menu_glide1" class="webwidget_menu_glide">
  <div class="webwidget_menu_glide_sprite"></div>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">News</a></li>
   <li class="current"><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">More...</a></li>
  </ul>
  <div style="clear: both"></div>
  </div></td>
 </tr>
 <tr>
 <td><h2>Demo2</h2>
  <br/>
  <br/>
  <script language="javascript" type="text/javascript">
   $(function() {
    $("#webwidget_menu_glide2").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#CCC", menu_sprite_color:"#666", menu_background_color:"#000", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide2" });
   });
  </script>
  <div id="webwidget_menu_glide2" class="webwidget_menu_glide">
  <div class="webwidget_menu_glide_sprite"></div>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">News</a></li>
   <li class="current"><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">More...</a></li>
  </ul>
  <div style="clear: both"></div>
  </div></td>
 </tr>
 <tr>
 <td><h2>Demo3</h2>
  <br/>
  <br/>
  <script language="javascript" type="text/javascript">
   $(function() {
    $("#webwidget_menu_glide3").webwidget_menu_glide({menu_width:"100", menu_height:"23", menu_text_size:"12", menu_text_color:"#FFF", menu_sprite_color:"#86C7EF", menu_background_color:"#0F67A1", menu_margin:"2", sprite_speed:"normal", container:"webwidget_menu_glide3" });
   });
  </script>
  <div id="webwidget_menu_glide3" class="webwidget_menu_glide">
  <div class="webwidget_menu_glide_sprite"></div>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">News</a></li>
   <li class="current"><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">More...</a></li>
  </ul>
  <div style="clear: both"></div>
  </div></td>
 </tr>
</table>
</body>
</html>
登入後複製

希望本文所述對大家的jquery程式設計有所幫助。

相關標籤：
jquery 左右滑動 選單
來源：php.cn
上一篇：js實作div拖曳動畫運行軌跡效果程式碼分享_javascript技巧 下一篇：js div實作文字滾動和圖片切換效果碼_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
如何使用 jquery 檢索 HTML 資料表中未選定行的值 我試圖獲取所有未單擊按鈕的行的值。例如，當我單擊第一行上的按鈕時，我想檢索沒有單擊的行的值。 vartable=document.getElementById("all_...
來自於 2024-04-05 09:26:49
0
1
1418
需要一個 jquery 腳本，根據最終用戶的當前選擇從選擇框中移動選定的選項 我有一個HTML頁面，最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
來自於 2024-04-04 18:40:04
0
1
3528
我已經透過書籤在純 CSS 中創建了一個元素。它已創建，但不可見 我的程式碼如下：g=document.createElement('div');g.setAttribute("id","divcontainer&q...
來自於 2024-04-04 17:27:27
0
1
417
在 Safari/Firefox iOS 上無法傳送表單數據 這適用於除iOS上的Safari/Firefox之外的所有平台：jQuery("#gform_1").one('submit',function(event){...
來自於 2024-04-04 12:53:48
0
1
303
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板