基于psoft.js制作的一款立体旋转查看图片应用

1.可以通过鼠标滑动来操作图片的旋转，可以向右，向左拖动

a。向左滑动

b。向右滑动

c。向左转到一下

2.代码实现：

a。初始化图片资源

psoft.onReady(function(){var imgs = [{src:'i1.jpg'},{src:'i2.jpg'},{src:'i3.jpg'},{src:'i4.jpg'}];album = new spaceAlbum( imgs );});

b。初始化图片

    init: function( arg ){//bind the elelment specified by id.this.bindWrap( arg[1] );//initialize the images.psoft.isArray( arg[0] ) && this.initImage( arg[0] );this.initData();this.initPosition();//push the current spaceAlbum object to global variable of spaceAlbumthis.objNum = spaceAlbum.obj.length;spaceAlbum.obj.push( this );},

通过js碎片文档来初始化图片资源

    initImage: function( imgs ){if ( this.idWrap ){//restore the imagesthis.imgs = imgs;//create the imagesvar fragment = document.createDocumentFragment();this.imgLen = imgs.length;for ( var i = 0, len = this.imgLen; i < len; i++ ){var img = psoft.createEle( 'img', imgs[ i ] );fragment.appendChild( img );}this.idWrap.appendChild( fragment );//add event listener$t( 'div', this.idWrap ).addEventListener('mousedown',spaceAlbum.mousedown, { obj: this});$t( 'div', this.idWrap ).addEventListener('mousemove',spaceAlbum.mousemove, { obj: this});$t( 'div', this.idWrap ).addEventListener('mouseup',spaceAlbum.mouseup, { obj: this});$t( 'div', this.idWrap ).addEventListener('mouseout',spaceAlbum.mouseup, { obj: this});}}

初始化图片的位置关系，最前面那个位置是blockMiddle

    initData: function(){// initialize important data;if ( this.imgLen ){// block variablethis.block = new Array( this.imgLen );// which 'img' element needs to change position.this.needChange = new Array();this.stack = new Array( );this.blockLeft = Math.floor( this.imgLen / 2 )-1;this.blockMiddle = this.blockLeft + 1;this.blockRight = this.blockMiddle + 1; }}

初始化各个图片的位置

    initPosition: function(){if ( this.imgLen ){//initialize the position of imagesvar imgHandle = $t( 'img', this.idWrap );for( var i=0, len = this.imgLen; i < len; i++ ){var tempBlock = imgHandle.eq(i);switch(i){case this.blockLeft:tempBlock.addClass('pos0'); this.block[i]=0;break;case this.blockMiddle:tempBlock.addClass('pos1');this.block[i]=1;break;case this.blockRight:tempBlock.addClass('pos2');this.block[i]=2;break;default:tempBlock.addClass('pos3');this.stack.push(i);this.block[i]=3;break;}}}}