H5实现可拖动的360度环拍物品展示（2）

之前通过treesixty.js 插件实现了可拖拽的360度环拍物品展示 H5实现可拖动的360度环拍物品展示（1）

现在使用另外一个方法来实现类似的效果。

需要用到的图片为：

一张初始视角jpg图片和一张高相同的长条图，长条图包含每张角度物品图片。

实现过程

html

<!doctype html>
<html lang="en" class="no-js">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- CSS reset --><link rel="stylesheet" href="css/style.css"> <!-- Resource style --><title>360 Degrees</title>
</head>
<body><div class="cd-product-viewer-wrapper" data-frame="34" data-friction="0.33"> <!--data-frame为长条图中小图数量--><div><figure class="product-viewer"><img src="img/whtiecarView.jpg" alt="Product Preview"><div class="product-sprite" data-image="img/whitecar.png"></div></figure> <!-- .product-viewer --></div>
</div> <script src="js/jquery-2.1.4.js"></script><script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

css

html * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}*, *::after, *::before {box-sizing: border-box;
}html {font-size: 62.5%;
}body {font-size: 1.6rem;font-family: "Lato", sans-serif;color: #ffffff;background-color: #f6f6f6;/* overflow: hidden; */
}a {color: #b54240;text-decoration: none;
}img {max-width: 100%;
}
.cd-product-viewer-wrapper {text-align: center;
}
.cd-product-viewer-wrapper > div {display: inline-block;
}
.cd-product-viewer-wrapper .product-viewer {position: relative;z-index: 1;display: inline-block;overflow: hidden;
}
.cd-product-viewer-wrapper img {display: block;position: relative;z-index: 1;
}
.cd-product-viewer-wrapper .product-sprite {position: absolute;z-index: 2;top: 0;left: 0;height: 100%;width: 3400%;    /*注意：这里的宽度也是小图片的数量*100%*/background: url(../img/whitecar.png) no-repeat center center;background-size: 100%;opacity: 0;-webkit-transition: opacity 0.3s;-moz-transition: opacity 0.3s;transition: opacity 0.3s;
}
.cd-product-viewer-wrapper.loaded .product-sprite {opacity: 1;cursor: ew-resize;
}

main.js

jQuery(document).ready(function($){var productViewer = function(element) {this.element = element;this.handleContainer = this.element.find('.cd-product-viewer-handle');this.handleFill = this.handleContainer.children('.fill');this.handle = this.handleContainer.children('.handle');this.imageWrapper = this.element.find('.product-viewer');this.slideShow = this.imageWrapper.children('.product-sprite');this.frames = this.element.data('frame');//increase this value to increase the friction while dragging on the image - it has to be bigger than zerothis.friction = this.element.data('friction');this.visibleFrame = 0;this.loaded = false;this.animating = false;this.xPosition = 0;this.loadFrames();} productViewer.prototype.loadFrames = function() {var self = this,imageUrl = this.slideShow.data('image'),newImg = $('<img/>');this.loading('0.5');//you need this to check if the image sprite has been loadednewImg.attr('src', imageUrl).load(function() {$(this).remove();self.loaded = true;}).each(function(){image = this;if(image.complete) {$(image).trigger('load');}});}productViewer.prototype.loading = function(percentage) {var self = this;transformElement(this.handleFill, 'scaleX('+ percentage +')');setTimeout(function(){if( self.loaded ){//sprite image has been loadedself.element.addClass('loaded');transformElement(self.handleFill, 'scaleX(1)');self.dragImage();if(self.handle) self.dragHandle();} else {//sprite image has not been loaded - increase self.handleFill scale valuevar newPercentage = parseFloat(percentage) + .1;if ( newPercentage < 1 ) {self.loading(newPercentage);} else {self.loading(parseFloat(percentage));}}}, 500);}//draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/productViewer.prototype.dragHandle = function() {//implement handle draggabilityvar self = this;self.handle.on('mousedown vmousedown', function (e) {//console.log("dragHandle")self.handle.addClass('cd-draggable');var dragWidth = self.handle.outerWidth(),containerOffset = self.handleContainer.offset().left,containerWidth = self.handleContainer.outerWidth(),minLeft = containerOffset - dragWidth/2,maxLeft = containerOffset + containerWidth - dragWidth/2;self.xPosition = self.handle.offset().left + dragWidth - e.pageX;self.element.on('mousemove vmousemove', function (e) {if( !self.animating) {self.animating =  true;( !window.requestAnimationFrame )? setTimeout(function(){self.animateDraggedHandle(e, dragWidth, containerOffset, containerWidth, minLeft, maxLeft);}, 100): requestAnimationFrame(function(){self.animateDraggedHandle(e, dragWidth, containerOffset, containerWidth, minLeft, maxLeft);});}}).one('mouseup vmouseup', function (e) {self.handle.removeClass('cd-draggable');self.element.off('mousemove vmousemove');});e.preventDefault();}).on('mouseup vmouseup', function (e) {self.handle.removeClass('cd-draggable');});}productViewer.prototype.animateDraggedHandle = function(e, dragWidth, containerOffset, containerWidth, minLeft, maxLeft) {// console.log("animateDraggedHandle")var self = this;var leftValue = e.pageX + self.xPosition - dragWidth;// constrain the draggable element to move inside his containerif (leftValue < minLeft) {leftValue = minLeft;} else if (leftValue > maxLeft) {leftValue = maxLeft;}var widthValue = Math.ceil( (leftValue + dragWidth / 2 - containerOffset) * 1000 / containerWidth)/10;self.visibleFrame = Math.ceil( (widthValue * (self.frames-1))/100 );//update image frameself.updateFrame();//update handle position$('.cd-draggable', self.handleContainer).css('left', widthValue + '%').one('mouseup vmouseup', function () {$(this).removeClass('cd-draggable');});self.animating = false;}productViewer.prototype.dragImage = function() {//implement image draggabilityvar self = this;self.slideShow.on('mousedown vmousedown', function (e) {self.slideShow.addClass('cd-draggable');var containerOffset = self.imageWrapper.offset().left,containerWidth = self.imageWrapper.outerWidth(),minFrame = 0,maxFrame = self.frames - 1;self.xPosition = e.pageX;self.element.on('mousemove vmousemove', function (e) {if( !self.animating) {self.animating =  true;( !window.requestAnimationFrame )? setTimeout(function(){self.animateDraggedImage(e, containerOffset, containerWidth);}, 100): requestAnimationFrame(function(){self.animateDraggedImage(e, containerOffset, containerWidth);});}}).one('mouseup vmouseup', function (e) {self.slideShow.removeClass('cd-draggable');self.element.off('mousemove vmousemove');self.updateHandle();});e.preventDefault();}).on('mouseup vmouseup', function (e) {self.slideShow.removeClass('cd-draggable');});}productViewer.prototype.animateDraggedImage = function(e, containerOffset, containerWidth) {var self = this;var leftValue = self.xPosition - e.pageX;var widthValue = Math.ceil( (leftValue) * 100 / ( containerWidth * self.friction ));var frame = (widthValue * (self.frames-1))/100;if( frame > 0 ) {frame = Math.floor(frame);} else {frame = Math.ceil(frame);}var newFrame = self.visibleFrame + frame;if (newFrame < 0) {newFrame = self.frames - 1;} else if (newFrame > self.frames - 1) {newFrame = 0;}if (newFrame == 0 || newFrame == 15){console.log(newFrame,"yes")}if( newFrame != self.visibleFrame ) {self.visibleFrame = newFrame;self.updateFrame();self.xPosition = e.pageX;}self.animating =  false;}productViewer.prototype.updateHandle = function() {if(this.handle) {var widthValue = 100*this.visibleFrame/this.frames;this.handle.animate({'left': widthValue + '%'}, 0);//进度条更新延迟}}productViewer.prototype.updateFrame = function() {var transformValue = - (100 * this.visibleFrame/this.frames);console.log("1111",transformValue)// if(-93.75<transformValue && transformValue<-0){transformElement(this.slideShow, 'translateX('+transformValue+'%)');// }}function transformElement(element, value) {element.css({'-moz-transform': value,'-webkit-transform': value,'-ms-transform': value,'-o-transform': value,'transform': value,});}var productToursWrapper = $('.cd-product-viewer-wrapper');productToursWrapper.each(function(){new productViewer($(this));});
});

H5实现可拖动的360度环拍物品展示（2）相关推荐

H5实现可拖动的360度环拍物品展示（1）
需要实现可拖动的360度环拍的物品展示效果,大概效果为,拖动可360度查看. 使用threesixty.js插件实现. ThreeSixty 是生成可拖动的360度预览图像序列的 jQuery 插件. ...
居然可以用jQuery实现360度汽车产品3D旋转展示酷炫特效使用你的小鼠标来试试吧
作者:极客小俊公众号:同名今天我们来看一个用jquery实现360度汽车产品3D旋转展示的效果,其实逻辑很简单, 就是让一堆图片转来转去就行了!
原生JS --360度全景展示
介绍:本案是鼠标任意在桌面上(左右)滑动,展示360度各个角度的展示图. 实现方法:要各个角度的图片(n张),图片名序号排列(0,1,2,3--n),通过鼠标点击事件(document.onmouse ...
全景图片怎么制作？360度全景展示系统都有哪些功能？
360度全景一般是指VR全景,在VR全景中我们可以通过旋转视角看到前后左右乃至上下,给人以身临其境的视觉效果.目前VR全景技术已是目前全球范围内迅速发展并逐步流行的一种视觉新技术.越来越多的商企.房产 ...
360环物如何发布html,制作网页上的360度旋转全景图PixMaker使用详细教程
PixMaker是一个简单方便的360度全景图片制作软件,它可以将描写一个环型场景的多个连续图片无缝地接合在一起,形成一个360度"场景"图片.可以在网页上播放,使你的页面更加生动 ...
全景图的种类、360度三维实拍全景
(转载地址:http://blog.sina.com.cn/s/blog_4b27c38d01019xlv.html 谢谢作者的分享) 根据全景外在表现形式可以分为柱形全景和球形全景两大类.柱形全景是 ...
360度虚拟全景技术
第一节虚拟全景技术概述虚拟全景技术是在网上能够进行360度全景观察,而且通过交互操作,可以实现自由浏览,从而体验三维的VR视觉世界.全景图像,是指大于双眼正常有效视角(大约水平90度,垂直70度) ...
【精心挑选】10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
解密顺丰：内部360度监控，创始人王卫穿破牛仔裤见PE
今天看到的一篇好文章,原文地址:http://new.iheima.com/detail/2013/1202/56776.html. 顺丰20年融资破冰今年10月,记者曾以快递员的身份,来到了坐落于 ...

H5实现可拖动的360度环拍物品展示（2）

H5实现可拖动的360度环拍物品展示（2）相关推荐

最新文章

热门文章