html5网页制作 (HTML5-CSS3-厦门网站树立-360度产品阅读器)

文章编号：1791 更新时间：2024-01-06 分类：互联网资讯 阅读次数：次

资讯内容

360-degrees-Product-viewer

在电子商务的设计，关键指标之一是，以填补产品和用户之间的差距。这是低价商品尤为关键。因此，关键性整合互开工具，向用户提供了一种模式，以虚构体验的产品。

当天的资源是可以用来显示产品的虚构旅游一个便捷的交互式资源。代码段面前的想法是经常使用图像精灵和拖动链接到该图像的特定帧。你可以用它来显示技术的小工具的外部（或汽车，像咱们的展示！），或在普通状况下，创立花哨的产品动画。

创立结构

该HTML结构由两个关键局部组成：figure.product-观众的精灵笼统和产品预览图像，以及div.cd产品检查器手柄为观众手柄。

class="cd-product-viewer-wrapper"data-frame="16"data-friction="0.33">

class="product-viewer">

src="img/product-loading.jpg"alt="ProductPreview">

class="product-sprite"data-image="img/product.png">

class="cd-product-viewer-handle">

class="fill">

class="handle">Handle

该数据帧的属性div.cd产物-观察者包装指定图像精灵由帧的数量，而数据摩擦指定摩擦而在图像上拖动（它必定大于零）。

减少样式

在元素可见仅在开局时，当图像精灵仍在加载，并且被用来提供正确的尺寸的figure.product-观察者元素。至于div.product-精灵，它具备一个相对位置，100％和1600％的宽度，高度（咱们的笼统精灵是由16帧），并自动是暗藏的。该那么类是用来显示div.product魍魉一旦图像精灵曾经加载：

.cd-product-viewer-wrapper.product-viewer{

position:relative;

overflow:hidden;

}

.cd-product-viewer-wrapperimg{

/*thisistheimagevisiblebeforetheimagespriteisloaded*/

dISPlay:block;

position:relative;

z-index:1;

}

.cd-product-viewer-wrapper.product-sprite{

position:absolute;

z-index:2;

top:0;

left:0;

height:100%;

/*ourimagespriteiscomposedof16frames*/

width:1600%;

background:url(../img/product.png)no-repeatcentercenter;

background-size:100%;

opacity:0;

transition:opacity0.3s;

}

.cd-product-viewer-wrapper.loaded.product-sprite{

/*imagespritehasbeenloaded*/

opacity:1;

}

当用户拖动span.handle或产品笼统，咱们扭转div.product魍魉translateX值，显示出不同的图像帧（经常使用JavaScript）。

注：撰写你的笼统精灵帧应该有产品的预览图像相反的纵横比。

手柄加载效应是经过扭转到达的scaleX的值元件（经常使用JavaScript）;一旦像精灵曾经被加载，被暗藏，span.handle所示：

.cd-product-viewer-handle{

position:relative;

z-index:2;

width:60%;

max-width:300px;

height:4px;

background:#4d4d4d;

}

.cd-product-viewer-handle.fill{

/*thisisusedtocreatetheloadingfilleffect*/

position:absolute;

z-index:1;

left:0;

top:0;

height:100%;

width:100%;

border-radius:inherit;

background:#b54240;

transform:scaleX(0);

transform-origin:leftcenter;

transition:transform0.5s;

}

.loaded.cd-product-viewer-handle.fill{

/*imagespritehasbeenloaded*/

opacity:0;

}

.cd-product-viewer-handle.handle{

position:absolute;

z-index:2;

display:inline-block;

height:44px;

width:44px;

left:0;

top:-20px;

background:#b54240url(../img/cd-arrows.svg)no-repeatcentercenter;

border-radius:50%;

transform:translateX(-50%)scale(0);

}

.loaded.cd-product-viewer-handle.handle{

/*imagespritehasbeenloaded*/

transform:translateX(-50%)scale(1);

animation:cd-bounce0.3s0.3s;

animation-fill-mode:both;

}

@keyframescd-bounce{

0%{

transform:translateX(-50%)scale(0);

}

60%{

transform:translateX(-50%)scale(1.1);

}

100%{

transform:translateX(-50%)scale(1);

}

事情处置

为了成功产品的观众，咱们创立了一个productViewer对象，并经常使用loadFrames方法来审核图像精灵能否曾经被加载：

varproductViewer=function(element){

this.element=element;

this.handleContainer=this.element.find('.cd-product-viewer-handle');

this.handleFill=this.handleContainer.children('.fill');

//…

this.frames=this.element.data('frame');

//increasethisvaluetoincreasethefrictionwhiledraggingontheimage–ithastobebiggerthanzero

this.friction=this.element.data('friction');

this.visibleFrame=0;

this.loaded=false;

//…

this.loadFrames();

}

productViewer.prototype.loadFrames=function(){

varself=this,

imageUrl=this.slideShow.data('image');

//youneedthistocheckiftheimagespritehasbeenloaded

$('').attr('src',imageUrl).load(function(){

self.loaded=true;

});

this.loading('0.5');//triggersloadinganimation

}

varproductToursWrapper=$('.cd-product-viewer-wrapper');

productToursWrapper.each(function(){

newproductViewer($(this));

});

一旦图像精灵曾经加载的，所以咱们对鼠标按下/鼠标移动/鼠标松开事情，以适当的元素的事情处置程序：

if(self.loaded){

//spriteimagehasbeenloaded

self.element.addClass('loaded');

self.dragImage();

self.dragHandle();

//..

}else{

//…

}

关于这种效应在触摸设施上上班，咱们所经常使用的提供的vmousedown/vmouSEMove/vmouseup事情的jQueryMobile框架。

标签：产品展现、网站树立、 HTML5、网站制造、 CSS3、 360度产品阅读器、 360、

本文地址： https://yihaiquanyi.com/article/eba623d46382d5edf530.html

上一篇：html5网页制作HTML5厦门网站建设MediaCSS3C...
下一篇：css3伪元素选择器有哪些CSS3Web网页UI设计...