語音導航的tab選項卡效果

前端開發whqet,csdn,王海慶,whqet,前端開發專家

ladies and 鄉親們，廣大程式員同志們，周末仍然堅守在工作崗位，或者學習不輟的童鞋們，福音來了。

語音辨識高不高端、難不難？今天給大家推薦一個簡單易用的js實現的語音辨識架構annyang，然後用一個案例教教大家使用,也可以看看annyang官方網站.

 

線上案例，下載收藏。

annyang是一個能夠實現語音辨識的js類庫，小巧易用(僅僅2k)，相容中文。接下來我們看看怎麼使用。

首先匯入該annyang庫，可以使用CDN的方式，也可以下載來使用。

<!--下載到本地使用--><script src="js/annyang.min.js" type="text/javascript" charset="utf-8"></script><!--cdn方式使用--><script src="https://www.talater.com/annyang.min.js" type="text/javascript" charset="utf-8"></script>

然後我們就可以在js裡使用該類庫了，開始之前我們需要判斷annyang對象是否存在。

// 首先判斷 annyang對象是否存在  if (annyang) {  // 語音辨識命令判斷    }  else{  // 錯誤提示資訊    }

annyang通過設定命令、語音辨識匹配命令的方式的進行工作，具體的使用代碼如下。

// 首先判斷 annyang對象是否存在if (annyang) {    // 語音辨識命令判斷        // 定義命令  var commands = {    'go': function() {      window.location.href="http://blog.csdn.net/whqet/";    },  };    //設定設別語言  annyang.setLanguage('zh-cn');  //開啟調試  //annyang.debug('on');  // 添加命令  annyang.addCommands(commands);  // 啟動語音辨識，也可以綁定在事件上  annyang.start();}else{// 錯誤提示資訊}

annyang的基本使用就這樣，我們來看看今天的這個tab，具體的實現過程如下。

html

<ul class="tabs">    <li class="active" rel="tab1">新聞</li>    <li rel="tab2">通知</li>    <li rel="tab3">公告</li>    <li rel="tab4">備忘</li></ul><div class="tab_container">    <div id="tab1" class="tab_content">            <h2>新聞</h2>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p>    </div>    <!-- #tab1 -->    <div id="tab2" class="tab_content">            <h2>通知</h2>         <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>    </div>    <!-- #tab2 -->    <div id="tab3" class="tab_content">            <h2>公告</h2>         <p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p>    </div>    <!-- #tab3 -->    <div id="tab4" class="tab_content">            <h2>備忘</h2>         <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>    </div>    <!-- #tab4 --></div><!-- .tab_container -->

css

ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #333;width: 100%;}ul.tabs li {float: left;margin: 0;cursor: pointer;padding: 0px 21px;height: 31px;line-height: 31px;border-top: 1px solid #333;border-left: 1px solid #333;border-bottom: 1px solid #333;background-color: #666;color: #ccc;overflow: hidden;position: relative;}.tab_last {border-right: 1px solid #333;}ul.tabs li:hover {background-color: #ccc;color: #333;}ul.tabs li.active {background-color: #fff;color: #333;border-bottom: 1px solid #fff;display: block;}.tab_container {border: 1px solid #333;border-top: none;clear: both;float: left;width: 100%;background: #fff;overflow: auto;}.tab_content {padding: 20px;}

js，這裡用到了jquery，annyang

$(document).ready(function(){//普通tab，單擊控制$(".tab_content").hide();$(".tab_content:first").show();$('ul.tabs li').last().addClass("tab_last");$("ul.tabs li").click(function() {$(".tab_content").hide();$(".tab_content").eq($(this).index()).show();$("ul.tabs li").removeClass("active");$(this).addClass("active");});// 語音控制，首先判斷 annyang對象是否存在。if (annyang) {   // 定義語音控制命令裡使用的函數，切換tabvar showTab=function(i){$(".tab_content").hide();$(".tab_content").eq(i).show();$("ul.tabs li").removeClass("active");$("ul.tabs li").eq(i).addClass("active");};// 定義命令var commands = {  '新聞':function(){showTab(0)},  '通知':function(){showTab(1)},  '公告':function(){showTab(2)},  '備忘':function(){showTab(3)},};// 設定語言，預設為enannyang.setLanguage('zh-cn');// 可選設定，調試功能開啟，建議開發階段開啟annyang.debug();// 添加命令annyang.addCommands(commands);// 開始偵聽annyang，也可以綁定在事件上annyang.start();}})

That's it. 敬請留言，說說你的意見和建議。

----------------------------------------------------------

前端開發whqet，關注web前端開發，分享相關資源，歡迎點贊，歡迎拍磚。
---------------------------------------------------------------------------------------------------------