久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

有點(diǎn)炫的JavaScript立體圖片展示

 我依然125 2010-11-11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd">
<html>
<head>
<title>有點(diǎn)炫的立體圖片展示</title>
<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">
var Library = {};
Library.ease = function () {
 this.target = 0;
 this.position = 0;
 this.move = function (target, speed) {
  this.position += (target - this.position) * speed;
 }
}
var tv = {
 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) {
  var o = document.createElement('img');
  o.src = i.src;
  tv.screen.obj.appendChild(o);
  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;
  o.point2D = {};
  tv.O.push(o);
  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;
  }
  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();
    }
   }
  }
  o.animate = function () {
   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);
   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;
   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));
   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);
  }
 },
 /* ==== http://www. ==== */
 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;
  var i = 0, o;
  while( o = structure[i++] )
   this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
  this.resize();
  mouse.y = this.screen.y + this.screen.h;
  mouse.x = this.screen.x + this.screen.w;
  setInterval(tv.run, 16);
  setInterval(tv.dFPS, 1000);
 },
 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;
   }
  }
 },
 run : function () {
  tv.fps++;
  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);
  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);
  var i = 0, o;
  while( o = tv.O[i++] ) o.animate();
 },
 dFPS : function () {
  document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
  tv.fps = 0;
 }
}
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;
}
onload = function() {
 onresize = tv.resize;
 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 });
 tv.init(structure, 350, -200, .005, .0025);
}
</script>
</head>
<body>
<div id="screen"></div>
<div id="bankImages">
 <img alt="" src="/jscss/demoimg/wall_s6.jpg">
</div>
<div id="FPS"></div>
</body>
</html>

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多