聲明：如果程序有問題，請各位大蝦多多指點，謝謝。

基于psoft.js制作的一款立體旋轉(zhuǎn)查看圖片應(yīng)用

1.可以通過鼠標滑動來操作圖片的旋轉(zhuǎn)，可以向右，向左拖動

a。向左滑動

?

b。向右滑動

c。向左轉(zhuǎn)到一下

?

2.代碼實現(xiàn)：

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});}}

初始化圖片的位置關(guān)系，最前面那個位置是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;}}}}

?

更多詳情，請進入 ?http://www.pubsoft.net/works/spaceAlbum/index.html

轉(zhuǎn)載于:https://www.cnblogs.com/pubsoft/archive/2012/08/13/space_album.html

總結(jié)

以上是生活随笔為你收集整理的立体旋转查看图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。