JS实现跟随鼠标立体翻转图片的方法
网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了JS实现跟随鼠标立体翻转图片的方法,涉及javascript操作图片翻转的相关技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了JS实现跟随鼠标立体翻转图片的方法。分享给大家供大家参考。具体实现方法如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://.w3./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%;
: 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. = 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>
希望本文所述对大家的javascript程序设计有所帮助。
上一篇：JS数字抽奖游戏实现方法
下一篇：js实现使用鼠标拖拽切换图片的方法
编程语言
- 宿迁百度关键词排名指南：实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购：如何为您的业务赋能
- 安徽百度关键词seo贵不贵，一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广：提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化：提升网站可见性的全方位指
- 涞水SEO：提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化：提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广：提升您的网络可见性
- 萝北整站优化：提升您网站流量和排名的全面指