www.成人网.com,国产精品videosex极品,国精产品一区一区三区mba桃花

- 龍誠動態
  
  行業新聞
  
  我們的觀點
  
  公司公告
  
  建站技術
  
  網站SEO優化
  
  網站制作流程
  
  產品報價
  - 聯系電話：0577-55882408
  - 傳真號碼：0577-55882411
  - 聯系手機：15224122065
  - 聯系地址：溫州市甌海站南商貿城C幢306
- - 首頁-新聞中心-建站技術
  <!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">  </style> <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.fn.dynamicNav=function(options){ //默認配置 var defaults = { direction:"up", //動畫切換方向，總共4種up 、down 、left 、right duration:100 //三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000) }; // 覆蓋默認配置 var opts = $.extend(defaults, options); this.each(function(){ var navList=$(this).find("li"), navLink=navList.find("a"); //在a標簽外側插入span navList.wrapInner("<span></span>"); var span=navLink.parent(); //判斷是否垂直切換 if(opts.direction=="up" || opts.direction=="down"){ var v=true; } //判斷是否改變span初始位置及a樣式 if(opts.direction=="right" || opts.direction=="down"){ var restSpan=true; } navLink.each(function(){ //獲取a高度和寬度 var w=$(this).outerWidth(), p=$(this).parent(); //初始復制現有a標簽 $(this).clone().appendTo(p).addClass("over"); //如果是垂直切換 if(v){ p.css("width",w); }else{ p.css("width",2*w).parent().css("width",w); } }); //如果向右或向下切換，改變span初始位置及a樣式 if(restSpan){ span.each(function(){ if(opts.direction=="right"){ $(this).css({"margin-left":-$(this).outerWidth()/2}); } if(opts.direction=="down"){ $(this).css({"margin-top" : -$(this).outerHeight()/2}); } $(this) .find('a') .last() .removeClass("over") .prev() .addClass("over"); }); } //鼠標經過時動畫函數 function over(o){ o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration); } //鼠標移開時動畫函數 function out(o){ o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration); } //鼠標經過和離開 span.hover(function(){ restSpan ? out($(this)) : over($(this)); },function(){ restSpan ? over($(this)) : out($(this)); }); }); }; })(jQuery); $(function(){ //向左 $("#nav1").dynamicNav({ direction:"left", //動畫切換方向，總共4種up 、down 、left 、right duration:300 //三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000) }); //向右 $("#nav2").dynamicNav({ direction:"right", duration:200 }); //向上 $("#nav3").dynamicNav({ direction:"up", duration:100 }); //向下 $("#nav4").dynamicNav({ direction:"down", duration:400 }); }); </script> </head> <body> <h1>向左（速度300毫秒）</h1> <ul class="nav" id="nav1"> <li><a href="http://www.huygw.cn/jz.html">首頁</a></li> <li><a href="http://www.huygw.cn/jz.html">前端技術</a></li> <li><a href="http://www.huygw.cn/jz.html">視覺設計</a></li> <li><a href="http://www.huygw.cn/jz.html">文章歸檔</a></li> <li><a href="http://www.huygw.cn/jz.html">工具/書籍</a></li> <li><a href="http://www.huygw.cn/jz.html">關于我</a></li> </ul> <h1>向右（速度200毫秒）</h1> <ul class="nav" id="nav2"> <li><a href="http://www.huygw.cn/jz.html">首頁</a></li> <li><a href="http://www.huygw.cn/jz.html">前端技術</a></li> <li><a href="http://www.huygw.cn/jz.html">視覺設計</a></li> <li><a href="http://www.huygw.cn/jz.html">文章歸檔</a></li> <li><a href="http://www.huygw.cn/jz.html">工具/書籍</a></li> <li><a href="http://www.huygw.cn/jz.html">關于我</a></li> </ul> <h1>向上（速度100毫秒）</h1> <ul class="nav" id="nav3"> <li><a href="http://www.huygw.cn/jz.html">首頁</a></li> <li><a href="http://www.huygw.cn/jz.html">前端技術</a></li> <li><a href="http://www.huygw.cn/jz.html">視覺設計</a></li> <li><a href="http://www.huygw.cn/jz.html">文章歸檔</a></li> <li><a href="http://www.huygw.cn/jz.html">工具/書籍</a></li> <li><a href="http://www.huygw.cn/jz.html">關于我</a></li> </ul> <h1>向下（速度400毫秒）</h1> <ul class="nav" id="nav4"> <li><a href="http://www.huygw.cn/jz.html">首頁</a></li> <li><a href="http://www.huygw.cn/jz.html">前端技術</a></li> <li><a href="http://www.huygw.cn/jz.html">視覺設計</a></li> <li><a href="http://www.huygw.cn/jz.html">文章歸檔</a></li> <li><a href="http://www.huygw.cn/jz.html">工具/書籍</a></li> <li><a href="http://www.huygw.cn/jz.html">關于我</a></li> </ul> </body> </html>