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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
浅谈Vue数据响应
Nov 05 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
vue 内联样式style中的background用法说明
Aug 05 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
深入密码加salt原理的分析
2013/06/06 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
jQuery操作cookie
2016/08/08 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
ES6中异步对象Promise用法详解
2019/07/31 Javascript
python去除扩展名的实例讲解
2018/04/23 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
社区庆八一活动方案
2014/02/02 职场文书
企业出纳岗位职责
2014/03/12 职场文书
大跃进口号
2014/06/16 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
六一亲子活动感想
2015/08/07 职场文书
趣味运动会标语口号
2015/12/26 职场文书
高中数学课堂教学反思
2016/02/18 职场文书