超流暢漂亮的圖檔3D旋轉滾動JS特效代碼 - JS代碼網
* { margin:0; padding:0; list-style:none; }
body { background:black; overflow:hidden;}
#stage {
width:200px; height:300px; position:relative; margin:0 auto; margin-top:150px;background:null;
-webkit-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);
-moz-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);
-ms-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);
-o-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);
transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#shadow {
position:absolute; left:50%; top:50%; width:1200px; height:1200px; margin-left:-600px; margin-top:-600px;
background:-webkit-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background: -moz-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background: -ms-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background: -o-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background: radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
-webkit-transform:translateY(200px) rotateX(90deg);
-moz-transform:translateY(200px) rotateX(90deg);
-ms-transform:translateY(200px) rotateX(90deg);
-o-transform:translateY(200px) rotateX(90deg);
transform:translateY(200px) rotateX(90deg);
}
#stage dd {
height:300px; width:200px; position:absolute; left:0; top:0; border:1px solid #666;
-webkit-transition:500ms all ease;
-moz-transition:500ms all ease;
-ms-transition:500ms all ease;
-o-transition:500ms all ease;
transition:500ms all ease;
}
.over {
position:absolute; left:0; top:320px; width:200px; height:300px; overflow:hidden;
-webkit-transition:2s all ease;
-moz-transition:2s all ease;
-ms-transition:2s all ease;
-o-transition:2s all ease;
transition:2s all ease;
-webkit-transform:scale(1,-1);
-moz-transform:scale(1,-1);
-ms-transform:scale(1,-1);
-o-transform:scale(1,-1);
transform:scale(1,-1);
background-size:100% 100%;
opacity:0;
}
var Effect = function( a, w, h, s, p, x, y )
{
var _3Deffect = function( array , width, height, stage, per, x, y )
{
this.oDoc = document;
this.stage = stage;
this.width = width;
this.height = height;
this.path = array;
this.domStr = "
";
this.perspective = per,
this.rotateX = x,
this.rotateY = y,
this.speedX=0,
this.speedY=0;
}
_3Deffect.prototype = {
transform : function( elem, value, key )
{
key = key || "transform";
[ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre )
{
elem.style[ pre + key ] = value;
});
return elem;
},
piece : function( value, key )
{
var str = "";
key = key || "transform";
[ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre )
{
str += ( key + ":" + pre + value );
return false;
});
return str;
},
addEvent : function ( obj, sEvent, fn )
{
if( obj.attachEvent )
{
obj.attachEvent( "on" + sEvent, fn );
}
else
{
obj.addEventListener( sEvent, fn, false );
};
},
onMouseWheel : function( e )
{
var _o = this;
if( e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0 )
{
if( _o.perspective < 4000 )
{
_o.perspective += 150;
};
}
else
{
if( _o.perspective > 350 )
{
_o.perspective -= 150;
};
};
_o.transform( _o.stage[0], "perspective(" + _o.perspective + "px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" );
if( e.preventDefault )
{
e.preventDefault();
};
return false;
},
startMove : function startMove( obj )
{
var _o = this;
obj.timer = obj.timer || null;
clearInterval( obj.timer );
obj.timer = setInterval (function ()
{
_o.rotateX -= _o.speedY;
_o.rotateY += _o.speedX;
_o.speedY *= 0.93;
_o.speedX *= 0.93;
if( Math.abs( _o.speedX ) < 0.1 && Math.abs( _o.speedY ) < 0.1 )
{
_o.stopMove( obj.timer );
};
_o.transform( obj, "perspective(" + _o.perspective + "px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" );
}, 30);
},
stopMove : function( t )
{
clearInterval( t );
},
init : function()
{
var _o = this;
Aui.each( _o.path, function( i )
{
var shadow = _o.piece( "linear-gradient(top, rgb(0, 0, 0) 50%, rgba(255, 255, 255, 0)), url(" + this + ");", "background-image" ),
shadow = "
_o.domStr += "
" + shadow + "";
});
Aui( _o.stage ).html( _o.domStr );
var _oList = Aui( "dd", _o.stage ),
_sLen = _o.path.length,
_deg = 360/_sLen,
_tranZ = ( _o.width/2 + 40 ) / Math.tan( ( 360/_sLen/2 ) * Math.PI / 180 ),
_i = _sLen;
while( _i > 0 )
{
( function( d, len, _oList, _o )
{
setTimeout( function()
{
var idx = len - d,
oThis = _oList[ idx ]
oThis.children[0].style.opacity = 0.2;
_o.transform( oThis, "rotateY(" + ( idx*_deg ) +"deg) translateZ(" + _tranZ + "px)" );
}, d * 200 );
})( _i-- , _sLen, _oList, _o );
};
var wheel = function( e )
{
_o.onMouseWheel.call( _o, e || window.event );
};
_o.addEvent( _o.oDoc, "mousewheel", wheel );
_o.addEvent( _o.oDoc, "DOMMouseScroll", wheel );
var AuiDoc = Aui( _o.oDoc );
AuiDoc.mousedown( function( e )
{
var moveX = e.clientX,
moveY = e.clientY;
var startX = _o.rotateX;
var startY = _o.rotateY;
var lastX = moveX;
var lastY = moveY;
_o.speedX = _o.speedY = 0;
AuiDoc.mousemove( function( e )
{
var x = e.screenX,
y = e.screenY;
_o.rotateY = startY + ( e.clientX - moveX )/10;
_o.rotateX = startX - ( e.clientY - moveY )/10;
_o.transform( _o.stage[0], "perspective("+ _o.perspective +"px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" );
_o.speedX =( e.clientX - lastX )/5;
_o.speedY =( e.clientY - lastY )/5;
lastX = e.clientX;
lastY = e.clientY;
});
AuiDoc.mouseup( function()
{
this.onmousemove = null;
this.onmouseup = null;
_o.startMove( _o.stage[0] );
});
_o.stopMove( _o.stage[0].timer );
return false;
} );
return _o;
}
};
return new _3Deffect( a, w, h, s, p, x, y );
};
Aui.ready( function()
{
if( /ie/g.test( Aui.browser() ) )
{
Aui("body").html("Adam CSS 3.0 effect，支援非IE浏覽器。你懂的！")
.setStyle(
{
"color" : "#fff",
"text-align" : "center",
"font-size" : "50px",
"font-weight" : "bolder",
"line-height" : "500px"
});
}
else
{
Effect(
[ "01.jpg", "02.jpg", "03.jpg", "01.jpg", "02.jpg", "03.jpg", "01.jpg", "02.jpg", "03.jpg" ],
200,
300,
Aui.byID("#stage"),
2000,
-10,
).init();
};
});
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6f798e51a1cd93937ee8293eece39b1a' type='text/javascript'%3E%3C/script%3E"));
一鍵複制
編輯
Web IDE
原始資料
按行檢視
曆史