JS实现跟随鼠标立体翻转图片的方法

2024-05-06 16:19:14

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JS实现跟随鼠标立体翻转图片的方法,涉及javascript操作图片翻转的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了JS实现跟随鼠标立体翻转图片的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Wanna tell her - interactive DHTML</title>

<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">

html {

overflow: hidden;

}

body {

position: absolute;

margin: 0px;

padding: 0px;

background: #fff;

width: 100%;

height: 100%;

}

#screen {

position: absolute;

left: 10%;

top: 10%;

width: 80%;

height: 80%;

background: #fff;

}

#screen img {

position: absolute;

cursor: pointer;

width: 0px;

height: 0px;

-ms-interpolation-mode:nearest-neighbor;

}

#bankImages {

visibility: hidden;

}

#FPS {

position: absolute;

right: 5px;

bottom: 5px;

font-size: 10px;

color: #666;

font-family: verdana;

}

</style>

<script type="text/javascript">

/* ==== Easing function ==== */

var Library = {};

Library.ease = function () {

this.target = 0;

this.position = 0;

this.move = function (target, speed) {

this.position += (target - this.position) * speed;

}

}

var tv = {

/* ==== variables ==== */

O : [],

fps : 0,

screen : {},

angle : {

x : new Library.ease(),

y : new Library.ease()

},

camera : {

x : new Library.ease(),

y : new Library.ease()

},

create3DHTML : function (i, x, y, z, sw, sh) {

/* ==== create HTML image element ==== */

var o = document.createElement('img');

o.src = i.src;

tv.screen.obj.appendChild(o);

/* ==== 3D coordinates ==== */

o.point3D = {

x : x,

y : y,

z : new Library.ease(),

sw : sw,

sh : sh,

w : i.width,

h : i.height

};

o.point3D.z.target = z;

/* ==== push object ==== */

o.point2D = {};

tv.O.push(o);

/* ==== on mouse over event ==== */

o.onmouseover = function () {

if (this != tv.o) {

this.point3D.z.target = tv.mouseZ;

tv.camera.x.target = this.point3D.x;

tv.camera.y.target = this.point3D.y;

if (tv.o) tv.o.point3D.z.target = 0;

tv.o = this;

}

return false;

}

/* ==== on mousedown event ==== */

o.onmousedown = function () {

if (this == tv.o) {

if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;

else {

tv.o = false;

this.onmouseover();

}

}

}

/* ==== main 3D function ==== */

o.animate = function () {

/* ==== 3D coordinates ==== */

var x = this.point3D.x - tv.camera.x.position;

var y = this.point3D.y - tv.camera.y.position;

this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);

/* ==== rotations ==== */

var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;

var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;

var yz = tv.angle.cy * xz - tv.angle.sy * x;

var yx = tv.angle.sy * xz + tv.angle.cy * x;

/* ==== 2D transform ==== */

var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);

x = yx * scale;

y = xy * scale;

var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));

var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));

/* ==== HTML rendering ==== */

var o = this.style;

o.left = Math.round(x + tv.screen.w - w * .5) + 'px';

o.top = Math.round(y + tv.screen.h - h * .5) + 'px';

o.width = w + 'px';

o.height = h + 'px';

o.zIndex = 10000 + Math.round(scale * 1000);

}

},

/* ==== init script ==== */

init : function (structure, FL, mouseZ, rx, ry) {

this.screen.obj = document.getElementById('screen');

this.screen.obj.onselectstart = function () { return false; }

this.screen.obj.ondrag = function () { return false; }

this.mouseZ = mouseZ;

this.camera.focalLength = FL;

this.angle.rx = rx;

this.angle.ry = ry;

/* ==== create objects ==== */

var i = 0, o;

while( o = structure[i++] )

this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);

/* ==== start script ==== */

this.resize();

mouse.y = this.screen.y + this.screen.h;

mouse.x = this.screen.x + this.screen.w;

/* ==== loop ==== */

setInterval(tv.run, 16);

setInterval(tv.dFPS, 1000);

},

/* ==== resize window ==== */

resize : function () {

var o = tv.screen.obj;

if (o) {

tv.screen.w = o.offsetWidth / 2;

tv.screen.h = o.offsetHeight / 2;

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 () {

tv.fps++;

/* ==== motion ease ==== */

tv.angle.x.move(-(mouse.y-tv.screen.h-tv.screen.y)*tv.angle.rx,.1);

tv.angle.y.move((mouse.x-tv.screen.w-tv.screen.x)*tv.angle.ry,.1);

tv.camera.x.move(tv.camera.x.target, .025);

tv.camera.y.move(tv.camera.y.target, .025);

/* ==== 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 images ==== */

var i = 0, o;

while( o = tv.O[i++] ) o.animate();

},

/* ==== trace frames per seconds ==== */

dFPS : function () {

document.getElementById('FPS').innerHTML = tv.fps + ' FPS';

tv.fps = 0;

}

}

/* ==== 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;

}

/* ==== starting script ==== */

onload = function() {

onresize = tv.resize;

/* ==== build grid ==== */

var img = document.getElementById('bankImages').getElementsByTagName('img');

var structure = [];

for (var i = -300; i <= 300; i += 120)

for (var j = -300; j <= 300; j += 120)

structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });

/* ==== let's go ==== */

tv.init(structure, 350, -200, .005, .0025);

}

</script>

</head>

<body>

<div id="screen"></div>

<div id="bankImages">

<img alt="" src="images/p2.jpg">

</div>

<div id="FPS"></div>

</body>

</html>