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


Posted in Javascript onMay 04, 2015

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
关于js内存泄露的一个好例子
Dec 09 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
分享Javascript实用方法二
Dec 13 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 #Javascript
js实现每日自动换一张图片的方法
May 04 #Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 #Javascript
JavaScript中操作字符串小结
May 04 #Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 #Javascript
javascript多行字符串的简单实现方式
May 04 #Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 #Javascript
You might like
PHP多例模式介绍
2013/06/24 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
python控制台显示时钟的示例
2014/02/24 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
vscode 远程调试python的方法
2017/12/01 Python
python3实现逐字输出的方法
2019/01/23 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python continue语句实例用法
2020/02/06 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
个人考核材料
2014/05/15 职场文书
学习党代会心得体会
2014/09/05 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
祝酒词范文
2015/08/12 职场文书
python基础之while循环语句的使用
2021/04/20 Python