立体旋转查看图片

声明：如果程序有问题，请各位大虾多多指点，谢谢。

基于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 spaceAlbum
        this.objNum = spaceAlbum.obj.length;
        spaceAlbum.obj.push( this );
        
    },

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

    initImage: function( imgs ){
        if ( this.idWrap )
        {
            //restore the images
            this.imgs = imgs;
            //create the images
            var 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 variable
            this.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 images
            var 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