Home > Developer > Web Develop
Cool 3D photo display effect and Cool 3d display
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Meta name = "keywords" content = "album code"/>
<Meta name = "description" content = "This code displays Cool 3D photos and is a common code used by webmasters. "/>
<Title> Cool 3D photo display effect </title>
<Style type = "text/css">
Html {
Overflow: hidden;
}
Body {
Position: absolute;
Margin: 0px;
Padding: 0px;
Background: #111;
Width: 100%;
Height: 100%;
}
# Screen {
Position: absolute;
Left: 10%;
Top: 10%;
Width: 80%;
Height: 80%;
Background: #000;
}
# Screen img {
Position: absolute;
Cursor: pointer;
Visibility: hidden;
Width: 0px;
Height: 0px;
}
# Screen. tvover {
Border: solid #876;
Opacity: 1;
Filter: alpha (opacity = 100 );
}
# Screen. tvout {
Border: solid # fff;
Opacity: 0.7;
}
# BankImages {
Display: none;
}
</Style>
<Script type = "text/javascript">
Var Library = {};
Library. Libraries = function (){
This.tar get = 0;
This. position = 0;
This. move = function (target, speed)
{
This. position + = (target-this. position) * speed;
}
}
Var TV = {
/* = Variables = */
O: [],
Screen :{},
Grid :{
Size: 4, // 4x4 grid
BorderSize: 6, // borders size
Zoomed: false
},
Angle :{
X: new Library. Libraries (),
Y: new Library. Libraries ()
},
Camera :{
X: new Library. Libraries (),
Y: new Library. Libraries (),
Zoom: new Library. Resize (),
FocalLength: 750 // camera Focal Length
},
/* = Init script = */
Init: function ()
{
This. screen. obj = document. getElementById ('screen ');
Var img = document. getElementById ('bankimages'). getElementsByTagName ('img ');
This. screen. obj. onselectstart = function () {return false ;}
This. screen. obj. ondrag = function () {return false ;}
/* = Create images grid = */
Var ni = 0;
Var n = (TV. grid. size/2)-. 5;
For (var y =-n; y <= n; y ++)
{
For (var x =-n; x <= n; x ++)
{
/* = Create HTML image element = */
Var o = document. createElement ('img ');
Var I = img [(ni ++) % img. length];
O. className = 'tvout ';
O. src = I. src;
TV. screen. obj. appendChild (o );
/* = 3D coordinates = */
O. point3D = {
X: x,
Y: y,
Z: new Library. Loads ()
};
/* = Push object = */
O. point2D = {};
O. ratioImage = 1;
TV. O. push (o );
/* = On mouse over event === */
O. onmouseover = function ()
{
If (! TV. grid. zoomed)
{
If (TV. o)
{
/* = Mouse out = */
TV .o.point3D.z.tar get = 0;
TV. o. className = 'tvout ';
}
/* = Mouse over = */
This. className = 'tvover ';
This.point3D.z.tar get =-. 5;
TV. o = this;
}
}
/* = On click event = */
O. onclick = function ()
{
If (! TV. grid. zoomed)
{
/* = Zoom in = */
TV .camera.x.tar get = this. point3D. x;
TV .camera.y.tar get = this. point3D. y;
TV .camera.zoom.tar get = TV. screen. w * 1.25;
TV. grid. zoomed = this;
} Else {
If (this = TV. grid. zoomed ){
/* = Zoom out = */
TV .camera.x.tar get = 0;
TV .camera.y.tar get = 0;
TV .camera.zoom.tar get = TV. screen. w/(TV. grid. size +. 1 );
TV. grid. zoomed = false;
}
}
}
/* = 3D transform function = */
O. calc = function ()
{
/* = Export mouseover = */
This.point3D.z.move(this.point3D.z.tar get,. 5 );
/* = Assign 3D coords = */
Var x = (this. point3D. x-TV. camera. x. position) * TV. camera. zoom. position;
Var y = (this. point3D. y-TV. camera. y. position) * TV. camera. zoom. position;
Var z = this. point3D. z. position * TV. camera. zoom. position;
/* = Perform rotations = */
Var xy = TV. angle. cx * y-TV. angle. sx * z;
Var xz = TV. angle. sx * y + TV. angle. cx * z;
Var yz = TV. angle. cy * xz-TV. angle. sy * x;
Var yx = TV. angle. sy * xz + TV. angle. cy * x;
/* === 2D transformation === */
This. point2D. scale = TV. camera. focalLength/(TV. camera. focalLength + yz );
This. point2D. x = yx * this. point2D. scale;
This. point2D. y = xy * this. point2D. scale;
This. point2D. w = Math. round (
Math. max (
0,
This. point2D. scale * TV. camera. zoom. position *. 8
)
);
/* = Image size ratio = */
If (this. ratioImage> 1)
This. point2D. h = Math. round (this. point2D. w/this. ratioImage );
Else
{
This. point2D. h = this. point2D. w;
This. point2D. w = Math. round (this. point2D. h * this. ratioImage );
}
}
/* = Rendering = */
O. draw = function ()
{
If (this. complete)
{
/* = Paranoid image load = */
If (! This. loaded)
{
If (! This. img)
{
/* = Create internal image = */
This. img = new Image ();
This. img. src = this. src;
}
If (this. img. complete)
{
/* = Get width/height ratio = */
This. style. visibility = 'visable ';
This. ratioImage = this. img. width/this. img. height;
This. loaded = true;
This. img = false;
}
}
/* = HTML rendering = */
This. style. left = Math. round (
This. point2D. x * this. point2D. scale +
TV. screen. w-this. point2D. w *. 5
) + 'Px ';
This. style. top = Math. round (
This. point2D. y * this. point2D. scale +
TV. screen. h-this. point2D. h *. 5
) + 'Px ';
This. style. width = this. point2D. w + 'px ';
This. style. height = this. point2D. h + 'px ';
This. style. borderWidth = Math. round (
Math. max (
This. point2D. w,
This. point2D. h
) * TV. grid. borderSize *. 01
) + 'Px ';
This. style. zIndex = Math. floor (this. point2D. scale * 100 );
}
}
}
}
/* = Start script = */
TV. resize ();
Mouse. y = TV. screen. y + TV. screen. h;
Mouse. x = TV. screen. x + TV. screen. w;
TV. run ();
},
/* === Resize window === */
Resize: function ()
{
Var o = TV. screen. obj;
TV. screen. w = o. offsetWidth/2;
TV. screen. h = o. offsetHeight/2;
TV .camera.zoom.tar get = TV. screen. w/(TV. grid. size +. 1 );
For (TV. screen. x = 0, TV. screen. y = 0; o! = Null; o = o. offsetParent)
{
TV. screen. x + = o. offsetLeft;
TV. screen. y + = o. offsetTop;
}
},
/* = Main loop = */
Run: function ()
{
/* = Motion placement = */
TV. angle. x. move (-(mouse. y-TV. screen. h-TV. screen. y) *. 0025,. 1 );
TV. angle. y. move (mouse. x-TV. screen. w-TV. screen. x) *. 0025,. 1 );
TV .camera.x.move( TV .camera.x.tar get, TV. grid. zoomed? . 25:. 025 );
TV .camera.y.move( TV .camera.y.tar get, TV. grid. zoomed? . 25:. 025 );
TV .camera.zoom.move( TV .camera.zoom.tar get,. 05 );
/* = Angles sin and cos = */
TV. angle. cx = Math. cos (TV. angle. x. position );
TV. angle. sx = Math. sin (TV. angle. x. position );
TV. angle. cy = Math. cos (TV. angle. y. position );
TV. angle. sy = Math. sin (TV. angle. y. position );
/* = Loop through all images = */
For (var I = 0, o; o = TV. O [I]; I ++)
{
O. calc ();
O. draw ();
}
/* = Loop = */
SetTimeout (TV. run, 32 );
}
}
/* = Global mouse position = */
Var mouse = {
X: 0,
Y: 0
}
Document. onmousemove = function (e)
{
If (window. event) e = window. event;
Mouse. x = e. clientX;
Mouse. y = e. clientY;
Return false;
}
</Script>
</Head>
<Body>
<Hr/>
<Div id = "screen"> </div>
<Div id = "bankImages">
</Div>
<Script type = "text/javascript">
/* = Start script = */
Onresize = TV. resize;
TV. init ();
</Script>
<Br>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
