x-webkit-speech 实现语音输入功能

使用Chrome浏览器且细心的童鞋应该都会发现一些大的网站已经有了语音搜索功能了,例如淘宝等等。不过只有Chorme11以上才能够支持。

可以用Chrome浏览器点击话筒体验一下语音搜索。

DEMO:

实现起来非常简单,为input添加名为 x-webkit-speech 的属性就行了。

<input type="text" x-webkit-speech />

相关属性设置:

  • 设置语言种类:lang:
    <input type="text" x-webkit-speech lang="zh-CN" />
  • 设置发声语音改变时触发:onwebkitspeechchange
    <input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
  • 语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如“的”、“啦”:x-webkit-grammar
    <input type="text" class="text"  x-webkit-speech x-webkit-grammar="bUIltin:search">

需要注意的是,这个语音识别实际上是调用谷歌的api,语言识别率还不错,但是因为“你懂的”原因。就现阶段来说,这个功能暂时还只能说趣味性大于实用性

再话痨一句,就是当具有语音搜索的页面是iframe页面时,点击麦克风后,“请开始说话”这浮动层就不跟随input输入框了。

使用CSS3的transition属性实现视觉引导

今天在使用豌豆荚2版本的时候,发现他的引导新用户的效果很棒,之前有在很多手机应用上看到过。想到CSS3的transition属性,这个能否实现通过视觉引导新用户呢。经过参考例子和理解,基本实现效果。

代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>引导用户,创造视觉焦点</title> 
<style> 
.trans{transition:0.3s ease; -webkit-transition:0.3s ease; -moz-transition:0.3s ease;} 
.outer{width:973px; height:660px; margin:1em auto; position:relative; overflow:hidden;} 
.cover{border:973px solid rgba(0, 0, 0, .45); position:absolute;} 
.cover_step1{width:170px; height:100px; left:-970px; top:-970px;} 
.cover_step1:after{width:150px; content:'<- 您的手机型号'; margin:30px 0 0 180px;} 
.cover_step2{width:170px; height:220px; left:-970px; top:-849px;} 
.cover_step2:after{width:140px; content:'<- 管理您的手机'; margin:100px 0 0 180px;} 
.cover_step3{width:170px; height:270px; left:-970px; top:-600px;} 
.cover_step3:after{width:240px; content:'<- 应用、音乐等下载区'; margin: 165px 0 0 180px;} 
.cover_step4{width:770px; height:515px; left:-785px; top:-880px;} 
.cover_step4:after{content:'主功能区 ->'; margin:0px 0 0 -100px;} 
.cover_step5{width:40px; height:40px; left:-45px; top:-355px;} 
.cover_step5:after{width: 220px; content:'分享照片等到新浪微博 ->'; margin:10px 0 0 -220px;} 
.cover_step1:after, .cover_step2:after, .cover_step3:after, .cover_step4:after, .cover_step5:after { 
    font-family: '微软雅黑'; 
    font-size:18px; 
    color: #fff; 
    text-shadow: 1px 1px #666; 
    position: absolute; 
} 
</style> 
</head> 

<body> 
<div class="outer"> 
    <span id="focus" class="cover cover_step1 trans"></span> 
    <img src="images/wdj.jpg" width="973" height="660" border="0" /> 
</div> 
<script> 
(function(stepIndex) { 
    var objStep = document.getElementById("focus"); 
    var funStep = function() { 
        objStep.className = objStep.className.replace(/\d/, (stepIndex + 1)); 
        stepIndex++; 
        if (stepIndex > 4) { 
            stepIndex = 0; 
        } 
        setTimeout(funStep, 3000); 
    }; 
    setTimeout(funStep, 3000); 
})(1); 
</script> 
</body> 
</html>

预览:

点击此处

如何让暂不支持HTML5的浏览器识别HTML5标签

由于HTML5近两年的火爆程度,越来越多的人员加入到HTML5的队伍中。各个浏览器厂商也在积极跟进,但是在中国市场上,依旧占着大部分市场的还是IE系列浏览器,IE6/IE7/IE8这些过时浏览器依旧是顽疾在坚挺这。这也导致前端开发人员必须想办法让这些浏览器兼容HTML5的新标签,例如header、nav、footer等标签。

下面介绍一下如何让这些浏览器兼容HTML5标签。原理是通过JS模拟这些新的标签并输出,下面是JS代码:

<!--[if IE]> 
    <script> 
    (function(){
if(!/*@cc_on!@*/0)return;var e = 
"abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,
footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,
video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() 
    </script> 
<![endif]-->

 

最后还是要定义一下CSS样式:

article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section {  
    display:block; 
}

 

这样就能成功让IE浏览器全面识别HTML5的新标签了。

CSS3制作浏览器LOGO系列 - 欧朋浏览器

较上一篇的遨游浏览器,这个欧朋浏览器效果多了旋转,渐变。复杂度稍微有所提高,仔细看一下代码 应该有所收获。
代码:

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>欧朋浏览器</title>  
<style>  
.oplogo{width:512px; height:512px; margin:0 auto; position:relative; overflow:hidden; top:50px;}  
.oplogo div{position:absolute;}  
/****** 外 圆******/ 
.outround{width:440px; height:470px; background-color:#800; background:-moz-linear-gradient(-90deg,#F88,#800); background:-webkit-gradient(linear,0 top,0 bottom, from(#F88),to(#800)); top:20px; left:36px; -moz-border-radius:220px/235px;  
-webkit-border-radius:220px 235px; border-radius:220px/235px;}  
/****** 边框高光 ******/ 
.highlight{width:436px; height:466px; background-color:#d40009; background:-moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009); background:-webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009)); top:22px; left:38px; border-radius:218px/233px; -moz-border-radius:218px/233px;-webkit-border-radius: 218px 233px;}  
/****** 上部高亮 ******/ 
.fill{width:436px; height:456px; background-color:#E71616; background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304); background:-webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000) ); top:30px; left:38px; border-radius:218px/228px; -moz-border-radius:218px/228px; -webkit-border-radius:218px 228px;}  
/****** 内 圆 ******/ 
.inround{width:198px; height:396px; background-color:#d20000;background:-moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000); background:-webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));left:158px; top:56px; border-radius:99px/170px; -moz-border-radius:99px/170px; -webkit-border-radius:99px 170px;}  
/****** 内填充 ******/ 
.inside{width:192px; height:390px; background-color:#b80000; background:-moz-linear-gradient(-90deg, #9a0000, #b80000); background:-webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000)); left:161px; top:59px; border-radius:96px/170px; -moz-border-radius:96px/170px; -webkit-border-radius:96px 170px;}  
/****** 内镂空 ******/ 
.counter {width:164px; height:368px; background-color:#FFF; left:174px; top:71px; border-radius: 2px/170px; -moz-border-radius: 82px/170px; -webkit-border-radius:82px 170px;}  
/****** 亮阴影 ******/ 
.lightshdow{left:106px; top:344px; height:50px; width:304px; border-radius:152px/25px;  
 moz-border-radius:152px/25px; -webkit-border-radius:152px 25px; box-shadow:0 100px 30px hsla(0,0%,0%,.2); -moz-box-shadow:0 100px 30px hsla(0,0%,0%,.2); -webkit-box-shadow:0 100px 30px hsla(0,0%,0%,.2);}  
/****** 暗阴影 ******/ 
.darkshdow{left:146px; top:325px; height:70px; width:220px; border-radius:110px/35px;  
 moz-border-radius:110px/35px;; -webkit-border-radius:110px 35px;; box-shadow:0 100px 15px hsla(0,0%,0%,.6); -moz-box-shadow:0 100px 15px hsla(0,0%,0%,.6); -webkit-box-shadow:0 100px 15px hsla(0,0%,0%,.6);}  
</style>  
</head>  
<body>  
<div class="oplogo">  
    <div class="lightshdow"></div>  
    <div class="darkshdow"></div>  
    <div class="outround"></div>  
    <div class="highlight"></div>  
    <div class="fill"></div>  
    <div class="inround"></div>  
    <div class="inside"></div>  
    <div class="counter"></div>  
</div>  
</body>  
</html>

预览:
点击此处

CSS3制作浏览器LOGO系列 - 遨游浏览器

代码:

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>CSS3-遨游浏览器</title>  
<style>  
.chrome {position:relative;-webkit-transition:all 3s ease-in-out;}  
.chrome:hover {-webkit-transform:translate(400px, 0) rotate(360deg);}  
.outround{background-color:#b1e4ff; border-radius:150px; border:2px solid #789cb6; margin:0 auto; margin-top:150px; height:300px; width:300px; box-shadow:3px 3px 5px #aaa; -moz-border-radius: 150px;}  
.inround{width:280px; height:280px; background-color:#3b99e3; border-radius:140px; margin:10px; position: relative; -moz-border-radius:140px;}  
.outbox{background-color:#fff; width:200px; height:130px; position:absolute; margin-top:75px; margin-left:40px; border-radius:3px 20px 3px 3px; overflow:hidden;}  
.inbox{background-color:#fff; width:55px; height:70px; border:25px solid #3b99e3; border-bottom:none;margin:0 auto;  margin-top:37px; }  
</style>  
</head>  

<body>  
<div class="chrome">  
        <div class="outround">  
                <div class="inround">  
                        <div class="outbox">  
                                <div class="inbox">  
                                </div>  
                        </div>  
                </div>  
        </div>  
</div>  
</body>  
</html>

PS:在FF和Chrome里面可以正常浏览,Chrome有惊喜。

预览地址:点击此处