网页案例实现html5语音识别、tourjs引导krpano动态加载xml、js和图像文件实现全息虚拟实景购物、获取注册手机验证码、JQuery商品3D展示、等

前言

今天向大家分享一项关于商城网页设计的案例。现如今大大小小的商城多如牛毛。如淘宝、京东、唯品会、聚美优品等各大应用平台的专属商城，实在是太多了。那么在众多的商城且大致功能服务都相同的情况下，如何让用户选择你的平台呢？那么在此次案例中我的收获点之一就是答案。用户体验。个人总结了以下四个方面：
1）有用：满足用户需求
2）易用：通俗易懂能让用户更容易上手和接受的产品
3）友好：界面友好、内容友好、适合用户浏览习惯
4）视觉：以新颖的方式呈现出产品的特性，同时释放出产品的吸引力，来吸引用户的眼球。
也就是说在满足前三的条件之后，给用户一种巨大的视觉冲击力让用户潜移默化地觉得你的产品还不错。当然用户体验感也决定一个产品/品牌的命运，决定着它们可以做多远、做多大、存活多久等……
那么此次商城案例，就是以新颖的方式，展示出不同以其它商城 的展现风格。

效果运行截图与视频

1：首页

介绍：主要使用了JQuery 和css 来控制首页的轮播图。可下一页、上一页、自动轮播。把它填满整个屏幕，给用户一种大方，舒适的感觉。同时引起用户的好奇心，继续往下浏览网页内容。

2：语音识别

介绍:当前功能模块，调用了科大讯飞的实时语音听写服务API。将识别用户说的话进行判断执行相应的动作和语音包进行互动。这里实现的有语音输入，语音跳转页面，互动唱歌，以及时间播报。

3:移动端获取注册验证码

介绍:这里实现的是，当用户对网页进行注册时。对用户输入的手机号进行发送验证码来证明为本人操作。调用的是阿里云短信服务API。

4：商品3D展示

介绍：商品详情页面。用户可选择鼠标移入商品详细图进行放大审查手机的细节部位，也可以点击3D展示功能。可对商品进行拖拽和旋转。

5：全息虚拟实景购物

介绍：使用的是tourjs，引导krpano动态加载xml、js和图像文件。而tourjs 是krpano嵌入到html的脚本和krpano浏览内核的合集。最终实现引导性的虚拟购物全景效果。当然这里的Ipad同样是与详情页一样，是基于jQuery Circlr插件实现产品图片360度旋转。那这里就为大家介绍3D展示商品的源代码。

    <!--引入Jquery函数库-->
  <script src="js/jquery.js"></script>
    <!--引入criclr.js-->
  <script src="js/criclr.js" type="text/javascript"></script>
    <!--html代码-->
```<div class="pane-body " >
            <div id="ipad-container">
                <img data-src="image/ipadimage/3Dimg39.png" />
                <img data-src="image/ipadimage/3Dimg38.png" />
                <img data-src="image/ipadimage/3Dimg37.png" />
                <img data-src="image/ipadimage/3Dimg36.png" />
                <img data-src="image/ipadimage/3Dimg35.png" />
                <img data-src="image/ipadimage/3Dimg34.png" />
                <img data-src="image/ipadimage/3Dimg33.png" />
                <img data-src="image/ipadimage/3Dimg32.png" />
                <img data-src="image/ipadimage/3Dimg31.png" />
                <img data-src="image/ipadimage/3Dimg30.png" />
                <img data-src="image/ipadimage/3Dimg29.png" />
                <img data-src="image/ipadimage/3Dimg28.png" />
                <img data-src="image/ipadimage/3Dimg27.png" />
                <img data-src="image/ipadimage/3Dimg26.png" />
                <img data-src="image/ipadimage/3Dimg25.png" />
                <img data-src="image/ipadimage/3Dimg24.png" />
                <img data-src="image/ipadimage/3Dimg22.png" />
                <img data-src="image/ipadimage/3Dimg21.png" />
                <img data-src="image/ipadimage/3Dimg20.png" />
                <img data-src="image/ipadimage/3Dimg19.png" />
                <img data-src="image/ipadimage/3Dimg18 .png" />
                <img data-src="image/ipadimage/3Dimg17.png" />
                <img data-src="image/ipadimage/3Dimg16.png" />
                <img data-src="image/ipadimage/3Dimg15.jpg" />
                <img data-src="image/ipadimage/3Dimg14.png" />
                <img data-src="image/ipadimage/3Dimg13.png" />
                <img