老外一个很酷的图片展示效果[图片特效

您现在的位置：蓝派网 >> 文章中心 >> 网页特效脚本集 >> 背景图像 >> 正文
站内文章搜索:
老外一个很酷的图片展示效果[图片特效

作者：佚名文章来源：网络更新时间：2008-9-6 1:17:36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>autumn II - interactive DHTML</title>
<meta name="Author" content="Gerard Ferrandez">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
 html {
  overflow: hidden;
 }
 body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  background: #111;
  width: 100%;
  height: 100%;
 }
 #screen {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  background: #000;
 }
 #screen img { 
  position: absolute;
  cursor: pointer;
  visibility: hidden;
  width: 0px;
  height: 0px;
 }
 #screen .tvover {
  border: solid #876;
  opacity: 1;
  filter: alpha(opacity=100);
 }
 #screen .tvout {
  border: solid #fff;
  opacity: 0.7;
 }
 #bankImages {
  display: none;
 }
</style>
<script type="text/javascript">
// =============================================================
//                 ===== photo 3D =====
// script written by Gerard Ferrandez - October 21th, 2007
// http://www.dhteumeuleu.com
// =============================================================
/* ==== library ==== */
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 : [],
 screen : {},
 grid : {
  size       : 4,  // 4x4 grid
  borderSize : 6,  // borders size
  zoomed     : false
 },
 angle : {
  x : new Library.ease(),
  y : new Library.ease()
 },
 camera : {
  x    : new Library.ease(),
  y    : new Library.ease(),
  zoom : new Library.ease(),
  focalLength : 750 // camera Focal Length
 },
 /* ==== init script ==== */
 init : function ()
 {
  this.screen.obj = document.getElementById('screen');
  var img = document.getElementById('bankImages').getElementsByTagName('img');
  this.screen.obj.onselectstart = function () { return false; }
  this.screen.obj.ondrag        = function () { return false; }
  /* ==== create images grid ==== */
  var ni = 0;
  var n = (tv.grid.size / 2) - .5;
  for (var y = -n; y <= n; y++)
  {
   for (var x = -n; x <= n; x++)
   {
    /* ==== create HTML image element ==== */
    var o = document.createElement('img');
    var i = img[(ni++) % img.length];
    o.className = 'tvout';
    o.src = i.src;
    tv.screen.obj.appendChild(o);
    /* ==== 3D coordinates ==== */
    o.point3D = {
     x  : x,
     y  : y,
     z  : new Library.ease()
    };
    /* ==== push object ==== */
    o.point2D = {};
    o.ratioImage = 1;
    tv.O.push(o);
    /* ==== on mouse over event ==== */
    o.onmouseover = function ()
    {
     if (!tv.grid.zoomed)
     {
      if (tv.o)
      {
       /* ==== mouse out ==== */
       tv.o.point3D.z.target = 0;
       tv.o.className = 'tvout';
      }
      /* ==== mouse over ==== */
      this.className = 'tvover';
      this.point3D.z.target = -.5;
      tv.o = this;
     }
    }
    /* ==== on click event ==== */
    o.onclick = function ()
    {
     if (!tv.grid.zoomed)
     {
      /* ==== zoom in ==== */
      tv.camera.x.target = this.point3D.x;
      tv.camera.y.target = this.point3D.y;
      tv.camera.zoom.target = tv.screen.w * 1.25;
      tv.grid.zoomed = this;
     } else {
      if (this == tv.grid.zoomed){
       /* ==== zoom out ==== */
       tv.camera.x.target = 0;
       tv.camera.y.target = 0;
       tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
       tv.grid.zoomed = false;
      }
     }
    }
    /* ==== 3D transform function ==== */
    o.calc = function ()
    {
     /* ==== ease mouseover ==== */
     this.point3D.z.move(this.point3D.z.target, .5);
     /* ==== assign 3D coords ==== */
     var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
     var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
     var z = this.point3D.z.position * tv.camera.zoom.position;
     /* ==== perform rotations ==== */
     var xy = tv.angle.cx * y  - tv.angle.sx * z;
     var xz = tv.angle.sx * y  + tv.angle.cx * z;
     var yz = tv.angle.cy * xz - tv.angle.sy * x;
     var yx = tv.angle.sy * xz + tv.angle.cy * x;
     /* ==== 2D transformation ==== */
     this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
     this.point2D.x = yx * this.point2D.scale;
     this.point2D.y = xy * this.point2D.scale;
     this.point2D.w = Math.round(
                        Math.max(
                          0, 
                          this.point2D.scale * tv.camera.zoom.position * .8
                        )
                      );
     /* ==== image size ratio ==== */
     if (this.ratioImage > 1)
      this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
     else
     {
      this.point2D.h = this.point2D.w;
      this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
     }
    }
    /* ==== rendering ==== */
    o.draw = function ()
    {
     if (this.complete)
     {
      /* ==== paranoid image load ==== */
      if (!this.loaded)
      {
       if (!this.img)
       {
        /* ==== create internal image ==== */
        this.img = new Image();
        this.img.src = this.src;
       }
       if (this.img.complete)
       {
        /* ==== get width / height ratio ==== */
        this.style.visibility = 'visible';
        this.ratioImage = this.img.width / this.img.height;
        this.loaded = true;
        this.img = false;
       }
      }
      /* ==== HTML rendering ==== */
      this.style.left = Math.round(
                          this.point2D.x * this.point2D.scale + 
                          tv.screen.w - this.point2D.w * .5
                        ) + 'px';
      this.style.top  = Math.round(
                          this.point2D.y * this.point2D.scale + 
                          tv.screen.h - this.point2D.h * .5
                        ) + 'px';  
      this.style.width  = this.point2D.w + 'px';
      this.style.height = this.point2D.h + 'px';
      this.style.borderWidth = Math.round(
                                 Math.max(
                                   this.point2D.w, 
                                   this.point2D.h
                                 ) * tv.grid.borderSize * .01
                               ) + 'px'; 
      this.style.zIndex = Math.floor(this.point2D.scale * 100);
     }
    }
   }
  }
  /* ==== start script ==== */
  tv.resize();
  mouse.y = tv.screen.y + tv.screen.h;
  mouse.x = tv.screen.x + tv.screen.w;
  tv.run();
 },
 /* ==== resize window ==== */
 resize : function ()
 {
  var o = tv.screen.obj;
  tv.screen.w = o.offsetWidth / 2;
  tv.screen.h = o.offsetHeight / 2;
  tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
  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 ()
 {
  /* ==== motion ease ==== */
  tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
  tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
  tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
  tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
  tv.camera.zoom.move(tv.camera.zoom.target, .05);
  /* ==== 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 all images ==== */
  for (var i = 0, o; o = tv.O[i]; i++)
  {
   o.calc();
   o.draw();
  }
  /* ==== loop ==== */
  setTimeout(tv.run, 32);
 }
}
/* ==== 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;
}
</script>
</head>
<body>
<div id="screen"></div>
<div id="bankImages">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012043434.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012044875.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012044659.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012044168.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012044889.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012045186.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012045851.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012045194.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012045775.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012046453.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012046424.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012046248.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012046691.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012047315.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012047955.jpg">
 <img alt="" src="http://www.lan27.com/Article/UploadFiles/200809/20080906012047823.jpg">
</div>
<script type="text/javascript">
 /* ==== start script ==== */
 onresize = tv.resize;
 tv.init();
</script>
</body>
</html>
<a href="http://www.lan27.com/">欢迎访问蓝派网</a>
[提示：可先修改代码再按运行]
上一篇文章：腾讯女性频道图片切换效果特效
下一篇文章：功能齐全的图片播放器,简洁大方.
百度搜索： 老外一个很酷的图片展示效果[图片特效
【发表评论】【打印此文】【关闭窗口】【点击数：】
★好玩的休闲小游戏★
网友评论：
数据载入中，请稍后……
老外一个很酷的图片展示效果[图片特效

本栏推荐

本栏热门

站内推荐

图文推荐

老外一个很酷的图片展示效果[图片特效

本 栏 推 荐

本 栏 热 门

站 内 推 荐

图 文 推 荐

本栏推荐

本栏热门

站内推荐

图文推荐
