Make a 360-degree look at the effect of the car to play (web)

A few days ago on the Lexus official website saw such an effect: http://www.lexus.com.cn/models/es/360

So easy to open the console to see how they do, found that the use of technology is relatively simple, through the background map of the switch to complete the effect of the panorama.

A whim to make an optimized version, first on the DEMO and source code. (Because the picture resource is large, loading time is longer, please wait patiently)

Next, share my production process. First look at the links to their pictures:

http://img.lexus.do2014.cn/images/es/car/spoke10a/Sonic_Quartz/. jpg!t1024x450.jpg

The position of the red is the number of the picture, and when dragged, the effect of the panorama is accomplished by changing the URL. Each car has 60 images per color, with a sequence number of 1-59.

Now want to download these 60 pictures, a buckle naturally too low, a small use of node. js to help us achieve this demand: in turn, request the picture, and through FileSystem to write the picture locally.

Download.js

varHTTP = require ("http"), FS= Require ("FS");varImgpath = ' http://img.lexus.do2014.cn/images/es/car/spoke10a/Red_Mica_Crystal_Shine/'; Fs.mkdir ('./downloadimg ', (err) = = {    if(Err && Err.code! = ' eexist ')return; Downloadimg ();});functiondownloadimg () { for(vari = 0; I < 60; i + +) {        varurl = imgpath + i + ". Jpg!t1024x450.jpg"; //console.log (URL);((i) ={http.get (URL, (res)= {                varout = Fs.createwritestream ('./downloadimg/' +i+ '. jpg ', {encoding:' Binary '                }); Res.on (' Data ', (chunk) ={out.write (chunk);                }); Res.on (' End ', () ={Console.log (' Image_ ' +i+ ' download complete. '); Out.end (‘‘);            });        });    }) (i); }}

$ node Download.js

So 60 pictures have been downloaded, and then want to through the CSS Wizard to achieve the effect of this image switch, so need to put these pictures into a whole, I use sketch here to complete.

Under the same server conditions, a card must be more efficient than the number of sheets. However, even after the compression of the diagram, it has the size of M. It would be nice if there was a CDN to speed it up.

The preparation has been completed, and the code is then written.

First, create a method to generate the matrix, which is used to store the coordinates of each vehicle in the sprite chart.

{
// ... I:0,J:0,RowNum:10,Colnum:6,Max:60,Conwidth:1024,Conheight:450,
//... Creatematrix () { This. Matrix = []; vararr = [];  for(vari = 0; I < This. Max; i + +) {            varPosition = '-' + This. I * This. Conwidth + '-' + This. Mm This. Conheight;            Arr.push (position);  This. I + +; if((i+1)% This. Colnum = = 0) {                 This. Matrix.push (arr); Arr= [];  This. I = 0;  This. J + +; }        }        //Console.log (This.matrix);         This. I = 0;  This. J = 0; }}

The resulting coordinate matrix is as follows

Since these coordinates are finally applied to the Backgroundpostion property, the "-" number is added directly in front of it.

Next, create a method that changes the number of rows in the picture, while setting the coordinates to backgroundposition.

{       //...     This. $container: Document.queryselector (' #container '),     This. i:0,     This. j:0,     This. rownum:10,     This. colnum:6,       //...Rotate (type) {//clockwise: Clockwise, anti: counterclockwise        if(type = = ' clockwise ')) {             This. I + +; if( This. I >= This. Colnum) {                 This. I = 0;  This. J + +; if( This. J >= This. RowNum) This. J = 0; }        } Else if(Type = = ' anti ')) {             This. I--; if( This. I < 0) {                 This. I = This. colNum-1;  This. J--; if( This. J < 0) This. J = This. rowNum-1; }        }        //Console.log (this. I, this. J);         This. Changeposition (); }, Changeposition () {//Console.log (this.matrix[this. J][this. I]);         This. $container. style.backgroundposition = This. matrix[ This. j][ This.    I]; },}

Finally, use Hammer.js to complete the gesture operation.

var New Hammer (this. $container); Hammer.on (function(e) {  if  ([drag right]) {　　 this. Rotate (' anti 'else  {  this. Rotate (' clockwise '); }});

In this way, the effect of a full-view car is complete.

Thank you for your visit and hope to be helpful.

Make a 360-degree look at the effect of the car to play (web)