网页案例实现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 data-src="image/ipadimage/3Dimg12.png" />
                <img data-src="image/ipadimage/3Dimg11.png" />
                <img data-src="image/ipadimage/3Dimg10.png" />
                <img data-src="image/ipadimage/3Dimg9.png" />
                <img data-src="image/ipadimage/3Dimg8.png" />
                <img data-src="image/ipadimage/3Dimg7.png" />
                <img data-src="image/ipadimage/3Dimg6.png" />
                <img data-src="image/ipadimage/3Dimg5.png" />
                <img data-src="image/ipadimage/3Dimg4.png" />
                <img data-src="image/ipadimage/3Dimg3.jpg" />
                <img data-src="image/ipadimage/3Dimg2.png" />
                <img data-src="image/ipadimage/3Dimg1.png" />
                <script type="text/javascript">
 
                 //实例化对象  参数1： 放置图片的容器元素的ID。
                 //            参数2：参数对象。
                    var ipad_container = circlr('ipad-container', {
     
     
                        scroll: true,  //是否通过scroll进行图片旋转，默认值为false。
                        loader: 'loader'  //预加载DOM元素的ID。
                    }); 
                
                </script>
            </div>
        </div>   

这里 img 标签内的图片为，商品的有序方位图。也就是一帧一帧给合成的。当然大家这个地方可以用Jquery循环动态生成。只要把相关图像文件命名好就行且文件格式一致，类似与（ipad_1、ipad_2、ipad_3、ipad_4、ipad_5……ipad_n）。那我这边是因为我的素材扩展名不一致，有些是png或者,jpg的。最后还有因为懒得命名就使用了快捷代码给一键命名了导致命名有些多了空格，有些没多……所以懒得管了也就这样了。

参数对象
mouse：是否通过鼠标进行图片旋转，默认值为true。

scroll：是否通过scroll进行图片旋转，默认值为false。

vertical：是否在垂直方向上移动鼠标时旋转图片，默认值为false。

reverse：是否反转方向，默认值为false。

cycle：是否循环旋转图片，默认值为true。

start：开始动画帧，默认值为0。

speed：动画帧通过circlr.turn(i)切换的速度，默认值为50毫秒。

autoplay：是否自动进行图片360度旋转播放，默认值为false。

playSpeed：动画序列的播放速度，默认值为100毫秒。

loader：预加载DOM元素的ID。

ready：图片加载完成后的回调函数。

change：动画帧改编之后的回调函数（以当前帧和总帧数为参数）。

调用方法
crl.el：返回对象的DOM元素节点。

crl.length：返回对象的总的动画帧数。

crl.turn(i)：动画旋转到第i帧。

crl.go(i)：动画跳转到第i帧。

crl.play()：开始动画序列的播放。

crl.stop()：停止动画播放。

crl.hide()：隐藏对象的DOM元素节点。

crl.show()：显示对象的DOM元素节点。

crl.set(options)：在插件初始化之后改变对象的参数：

如果懒得去下载 Circlr.js 的话我贴出来吧

// Circlr © 2014-2015 Andrey Polischuk github.com/andrepolischuk/circlr
!function () {
    
     "use strict"; function b(b) {
    
     function p(a, b, c) {
    
     a.addEventListener ? a.addEventListener(b, c, !1) : a.attachEvent("on" + b, function () {
    
     c.call(a, window.event) }) } function q(a) {
    
     a.preventDefault ? a.preventDefault() : a.returnValue = !1 } function r(a) {
    
     c = !1, q(a), a = "touchstart" === a.type ? a.changedTouches[0] : a, i = !0, b.vertical ? m.Y = a.clientY - d.offsetTop : m.X = a.clientX - d.offsetLeft } function s(a) {
    
     return 0 > a ? a = b.cycle ? a + f : 0 : a > f - 1 && (a = b.cycle ? a - f : f - 1), a } function t(a) {
    
     if (i) {
    
     q(a), a = "touchmove" === a.type ? a.changedTouches[0] : a; var c = b.vertical ? a.clientY - d.offsetTop - m.Y : a.clientX - d.offsetLeft - m.X; c = b.reverse ? -c : c; var e = h / f, g = l; c = Math.floor(c / e), c !== l && (l = s(m.frame + c), g !== l && (d.getElementsByTagName("img")[g].style.display = "none", d.getElementsByTagName("img")[l].style.display = "block", "function" == typeof n.change && n.change(l, f))) } } function u(a) {
    
     q(a), i = !1, m.frame = l } function v(a) {
    
     c = !1, q(a); var e = a.deltaY || a.detail || -a.wheelDelta; e /= Math.abs(e), e = b.reverse ? -e : e, l = s(l + e), d.getElementsByTagName("img")[m.frame].style.display = "none", d.getElementsByTagName("img")[l].style.display = "block", m.frame = l, "function" == typeof n.change && n.change(l, f) } function w() {
    
     if (e && (e.style.display = "none"), 0 === k.length) {
    
     var a = s(b.start); if (d.getElementsByTagName("img")[a].style.display = "block", l = a, d.style.position = "relative", d.style.width = "100%", "ontouchstart" in window || "onmsgesturechange" in window) (b.mouse || b.scroll) && (p(d, "touchstart", r), p(d, "touchmove", t), p(d, "touchend", u)); else if (b.mouse && (p(d, "mousedown", r), p(d, "mousemove", t), p(document, "mouseup", u)), b.scroll) for (var f = 0; f < o.length; f++)if ("on" + o[f] in window) {
    
     p(d, o[f], v); break } c && B() } "function" == typeof n.ready && n.ready(k) } function x(a) {
    
     a.onload = function () {
    
     j.push(this.src), j.length + k.length === f && w() }, a.onerror = function () {
    
     k.push(this.src), j.length + k.length === f && w() }, a.onreadystatechange = function () {
    
     this.onload() } } function y() {
    
     var a; e && (e.style.display = "block"); for (var b = 0; f > b; b++)a = d.getElementsByTagName("img")[b], a.style.display = "none", a.style.width = "100%", a.setAttribute("src", a.getAttribute("data-src")), a.setAttribute("data-index", b), a.removeAttribute("data-src"), x(a); g = g || d.clientHeight, h = h || d.clientWidth } function z(a) {
    
     d.getElementsByTagName("img")[l].style.display = "none", d.getElementsByTagName("img")[a].style.display = "block", m.frame = l = a } b.mouse = b.mouse || !0, b.scroll = b.scroll || !1, b.vertical = b.vertical || !1, b.reverse = b.reverse || !1, b.cycle = b.cycle || !0, b.start = b.start || 0, b.speed = b.speed || 50; var c = b.autoplay || !1; b.playSpeed = b.playSpeed || 100; var d = this.el = b.element; d.setAttribute("data-circlr", !0); var l, e = b.loader ? document.getElementById(b.loader) : void 0, f = this.length = d.getElementsByTagName("img").length, g = b.height || void 0, h = b.width || void 0, i = !1, j = [], k = [], m = {
    
    }; m.Y = null, m.X = null, m.frame = 0; var n = {
    
    }; n.ready = b.ready || void 0, n.change = b.change || void 0; var o = ["wheel", "mousewheel", "scroll", "DOMMouseScroll"]; y(); var A = this.turn = function (a) {
    
     a = s(a), c = !0, function d() {
    
     a !== l && c ? (z(s(l > a ? l - 1 : l + 1)), setTimeout(d, "undefined" == typeof a ? b.playSpeed : b.speed)) : a === l && (m.frame = l = a, c = !1, "function" == typeof n.change && n.change(l, f)) }() }; this.go = function (a) {
    
     a !== l && (z(a), "function" == typeof n.change && n.change(l, f)) }; var B = this.play = function () {
    
     c = !0, A() }; this.stop = function () {
    
     c = !1 }, this.show = function () {
    
     d.style.display = "block" }, this.hide = function () {
    
     d.style.display = "none" }, this.set = function (c) {
    
     for (var e, d = 0; d < a.length; d++)e = a[d], b[e] = "undefined" != typeof c[e] ? c[e] : b[e] } } function c(a, c) {
    
     return a = document.getElementById(a), a.getAttribute("data-circlr") ? void 0 : (c = c || {
    
    }, c.element = a, new b(c)) } var a = ["vertical", "reverse", "cycle", "speed", "playSpeed"]; "function" == typeof define && define.amd ? define([], function () {
    
     return c }) : "undefined" != typeof module && module.exports ? module.exports = c : this.circlr = c }.call(this);

6：模拟移动端支付

介绍： 使用的是JQuery，css动态地将用户在移动端的支付的步骤模拟一遍。从而实现全新的付款呈现方式。提高用户的乐趣。

整体项目运行效果视频

商城网页设计大赛冠军实现html语音识别，商品3D展示，获取移动端验证码等

感言

这个项目功能很多，今天咱就大致介绍以上我负责的部分功能模块。毕竟花了快3个月写的了。这个项目对我来说是很值得纪念和回忆的。它不仅是我学习成长的记录同时也是我第一次连续两次夺冠以及荣获奖杯。当然这离不开我们队员们，小何，小琛，小昱，小明 的三个月努力。 感谢我的队员，齐心协力，发挥各自特技，以及耐心授教的指导老师。赢来我们的荣誉经历。

最后小伙伴如果对此项目感兴趣或者有问题的可以下方留言也可以与我联系 邮箱为[email protected]。同时有不足的地方请大佬指出。小弟接受批评。

我的好朋友博客地址：https://blog.csdn.net/weixin_43851854