4顶

超酷的三维展厅动画效果

稿源：互联网 2022-04-02 21:43:20 点击： 2575 撤稿纠错

鼠标感应3维动画特效，非常漂亮。

以下讨论的是和三维相关的超酷的三维展厅动画效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 超酷的三维展厅动画 站长特效网欢迎您。</title>
<style type="text/css">
 html {
  overflow: hidden;
 }
 body {
  margin: 0px;
  padding: 0px;
  background: #111;
  width: 100%;
  height: 100%;
  cursor: default;
 }
 #www_zzjs_net {
  position:absolute;
  left: 0%;
  top: 10%;
  width: 100%;
  height: 80%;
  background: #000;
  overflow: hidden;
 }
 #www_zzjs_net img {
  position: absolute;
  visibility: hidden;
  left: -10000px;
  filter: alpha(opacity=100);
 }
 #www_zzjs_net div {
  position: absolute;
  top: -10000px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  filter: alpha(opacity=100);
  color: #FFF;
 }
 #www_zzjs_net .texturl {
  color: #FF8000;
 }
</style>
<script type="text/javascript">
var i3D = function() {
 /* ==== private variables and methods ==== */
 var O   = new Array(100);
 var N   = 0;
 var scr = false;
 var xm  = 0;
 var ym  = 0;
 var cx  = 0;
 var cy  = -2000;
 var cz  = 0;
 var zm  = 0;
 var cr  = 0;
 var nx  = 0;
 var ny  = 0;
 var nw  = 0;
 var nh  = 0;
 var cg  = false;
 var mo  = false;
 var path, FL, FS, Z, omob, hlb;
 /* ===== crossbrowsers events ==== */
 function addEvent (o, e, f) {
  var r = false;
  if (window.addEventListener) { o.addEventListener(e, f, false); r = true; }
  else if (window.attachEvent) { r = o.attachEvent('on' + e, f); }
  return r;
 }
 /* ===== append HTML Element ==== */
 function Append (tag, att, css) {
  var object = document.createElement(tag);
  for( var i in att) object[i] = att[i];
  for( var i in css) object.style[i] = css[i];
  this.appendChild(object);
  return object;
 }
 /* ===== window resize ==== */
 function resize () {
  var o = scr;
  for (nx = 0, ny = 0; o != null; o = o.offsetParent) {
   nx += o.offsetLeft;
   ny += o.offsetTop;
  }
  nw = scr.offsetWidth;
  nh = scr.offsetHeight;
 }
 /* ==== cache xbrowser opacity ==== */
 function initOpacity (o) {
  if (o.filters && o.filters.alpha) {
   o.alpha = o.filters.alpha;
   o.opacity = function (alpha) { this.alpha.opacity = Math.round(alpha); }
  } else {
   o.alpha = o.style;
   o.opacity = function (alpha) { this.alpha.opacity = alpha / 100; }
  }
 }
 /* ==== Image3D Constructor ==== */
 function Image3D (param) {
  var options = param[4] || {};
  /* ---- image Element ---- */
  this.img = scr.append('img', {
    'src' : path + param[0],
    'onclick' : this.click,
    'onmouseover' : this.mover,
    'parent' : this
   }
  );
  this.loaded = false;
  this.X      = param[1];
  this.Y      = -param[2];
  this.Z      = param[3];
  this.SX     = options['zx'] || 1;
  this.SY     = options['zy'] || this.SX;
  this.xb     = 0;
  this.yb     = 0;
  this.zb     = 0;
  this.ab     = 0;
  this.w2D    = 0;
  this.h2D    = 0;
  this.x2D    = 0;
  this.y2D    = 0;
  this.r      = 0;
  /* ---- link ---- */
  this.url = options['url'] || false;
  var txt  = options['txt'] || '';
  if (this.url) {
   txt += '<br><span class="texturl">'
    + this.url.replace('http://','')
    + '</span>';
   this.img.style.cursor = 'pointer';
  }
  this.icss = this.img.style;
  initOpacity(this.img);
  /* ---- text element ---- */
  if (txt) {
   this.txt = scr.append('div', {
     'innerHTML' : txt,
     'onclick' : this.click,
     'parent' : this
    },
    {'width' : '1000px'}
   );
   this.tp   = -10000;
   this.tf   = true;
   this.tcss = this.txt.style;
   initOpacity(this.txt);
  }
  O[N++] = this;
 }
 /* ==== prototype images functions ==== */
 Image3D.prototype = {
  /* ---- hide non moving images ---- */
  hide : function () {
   if (this.visible) {
    this.visible = false;
    this.img.style.width = '0px';
    this.tp = -10000;
   }
  },
  /* ---- hide text ---- */
  txthide : function () {
   if (this.txtvisible) {
    this.txtvisible = false;
    this.txt.style.top = '-10000px';
    this.tp = -10000;
    this.tf = true;
   }
  },
  /* ---- images onmouseover ---- */
  mover : function () {
   var that = this.parent;
   /* ---- hover ---- */
   if (mo != this) {
    if (mo) mo.style.border = "";
    mo = this;
    this.style.border = that.url ? hlb : omob;
   }
   /* ---- start animation text ---- */
   if (that.tf && Math.abs(zm - cz) < 50) {
    that.tp = 0;
    that.tf = false;
    that.tcss.fontSize = (that.r * nh / FS) + 'px'
   }
   return false;
  },
  /* ---- images onclick ---- */
  click : function() {
   var that = this.parent;
   if (that.url) {
    /* ---- jump to hyperlink ---- */
    window.location.href = that.url;
   }
   /* ---- go to image ---- */
   zm = that.Z + 5;
   cg = true;
   return false;
  },
  /* ==== main rendering function ==== */
  display : function () {
   if (this.loaded) {
    /* ---- 3D coordinates ---- */
    var x = this.X - cx;
    var y = this.Y - cy;
    var z = this.Z - cz;
    /* ---- animate text ---- */
    if(this.tp > -200) {
     this.txtvisible = true;
     this.tp         -= 2;
     this.tcss.left   = Math.round(this.x2D + this.w2D * .5 - 500) + 'px';
     this.tcss.top    = (this.y2D + this.tp + this.h2D * .5) + 'px';
     this.tcss.zIndex = Math.round(10000 - z);
     this.txt.opacity(200 + this.tp);
    } else this.txthide();
    /* ---- image visible ---- */
    if (z > 0) {
     /* ---- 3D to 2D transform ---- */
     this.r = FL / (FL + (z * Z));
     this.w2D = this.W * this.r * Z * this.SX;
     this.h2D = this.H * this.r * Z * this.SY;
     this.x2D = Math.floor((nw * .5) + (x * this.r * Z) - (this.w2D * .5));
     this.y2D = Math.floor((nh * .5) + (y * this.r * Z) - this.h2D);
     /* ---- image in www_zzjs_net ---- */
     if (this.x2D + this.w2D > 0 && this.x2D < nw) {
      this.visible = true;
      /* ---- image is moving ---- */
      if (this.x2D != this.xb || this.y2D != this.yb || z != this.zb) {
       this.xb    = this.x2D;
       this.yb    = this.y2D;
       this.zb    = z;
       /* ---- html rendering ---- */
       this.icss.left   = this.x2D + 'px';
       this.icss.top    = this.y2D + 'px';
       this.icss.width  = Math.ceil(this.w2D)  + 'px';
       this.icss.height = Math.ceil(this.h2D)  + 'px';
       this.icss.zIndex = Math.round(10000 - z);
       /* ---- fade in/out ---- */
       var a = Math.max(0, Math.min(100, z));
       if (a != this.ab) {
        this.ab = a;
        this.img.opacity(a);
       }
      }
     } else this.hide();
    } else this.hide();
   } else {
    /* ==== image onload ==== */
    if (this.img.complete && this.img.width) {
     /* ---- get size image ---- */
     this.W      = this.img.width;
     this.H      = this.img.height;
     this.loaded = true;
     this.img.style.visibility = 'visible';
    }
   }
  }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 /* ==== public methods ==== */
 return {
  /* ---- initialize script ---- */
  init : function (container, imagepath, focalLength, zoom, fontSize, onmouseover_border, hyperlink_border, structure) {
   /* ---- container ---- */
   scr = document.getElementById(container);
   scr.append = Append;
   if (!scr) return false;
   /* ---- init ---- */
   resize();
   path = imagepath;
   FL   = focalLength;
   FS   = fontSize;
   Z    = zoom;
   omob = onmouseover_border;
   hlb  = hyperlink_border;
   xm   = nx - (document.body.offsetWidth) + nw;
   ym   = -ny - nh * .5;
   /* ---- camera xy position ---- */
   addEvent(window.document, 'mousemove', function(e) {
    e = e || window.event;
    xm = nx - (e.clientX * 2) + nw;
    ym = -ny + (e.clientY * 2) - nh * 2;
    return false;
   });
   /* ---- image onclick ---- */
   addEvent(scr, 'click', function() {
    if (!cg) zm = 0;
    cg = false;
    return false;
   });
   /* ---- window resize ---- */
   addEvent(window, 'resize', resize);
   /* ---- mouse wheel - camera z position ---- */
   if (window.addEventListener) scr.addEventListener('DOMMouseScroll', function(e) {
    zm += (e.detail * 40);
    return false;
   }, false);
   scr.onmousewheel = function () {
    zm += (-event.wheelDelta);
    return false;
   }
   /* ---- create objects ---- */
   for (var i = 0, n = structure.length; i < n; i++)  {
    var s = structure[i];
    var options = s[4];
    /* ---- repeat ---- */
    var r = options ? options['repeat'] : false;
    if (r) {
     for (var j = 0, m = r[1]; j < m; j++) {
      var ok = new Image3D(s);
      s[r[0]] += r[2];
     }
    }  else var ok = new Image3D(s);
   }
   /* ---- launch script ---- */
   setInterval(i3D.run, 16);
  },
  /* ---- main loop ---- */
  run : function () {
   /* ---- camera ease ---- */
   cx -= Math.round((xm + cx) * .1);
   cy += Math.round((ym - cy) * .1);
   cz += Math.round((zm - cz) * .1);
   /* ---- display loop ---- */
   var i = N;
   while (i--) O[i].display();
  }
 }
}();
/* ==== global onload ==== */
onload = function () {
 /* ---- build structure ----
 i3D.init(container, path, focalLength, globalZoom, fontSize, onmouseover_border, hyperlink_border
  [image, x,y,z, {options}], ...
 );
 options { 'zx':zoom x, 'xy': zoom y, 'url':hyperlink, 'txt':text
  'repeat':[axis(1,2,3), number, increment]
 }
 */
 i3D.init("www_zzjs_net", "/img/", 300, 1, 12, '#666 solid 1px', '#fff dotted 1px', [
  ['bim.jpg', 0,20,1020, {'zx':9, 'zy':.5}],
  ['r4.gif', -1200,0,1000, {'txt':'duplicated'}],
  ['r29.gif', 700,0,1000, {'txt':'mechanomorphism'}],
  ['r15a.gif', -1100,0,900, {'txt':'amniocentetic'}],
  ['r59.gif', 600,0,500, {'txt':'asphericity'}],
  ['r39a.gif', -1000,0,200, {'txt':'onomatopoeia'}],
  ['r65.gif', -400,0,150, {'txt':'therianthrope'}],
  ['r39c.gif', 400,0,150, {'txt':'arboretum'}],
  ['r14.gif', 1200,0,250, {'txt':'heliotrope'}],
  ['r13.gif', 0,0,900, {'txt':'', 'url':'http://www.zzjs.net'}],
  ['r74.gif', -400,0,950, {'txt':'santorum'}],
  ['r74.gif', 400,0,950, {'txt':'taphephobia'}],
  ['r58c.gif', 700,0,800],
  ['r58c.gif', 1100,0,800],
  ['r46a.gif', 900,220,800, {'txt':'philatelical'}],
  ['r58b.gif', 900,-20,740, {'txt':'salmagundi'}],
  ['r8.gif', -600,0,800, {'txt':'diverticulectomy'}],
  ['r67.gif', -750,0,900, {'zx':0.8, 'txt':'cerebrotonic'}],
  ['r69.gif', -900,0,750, {'txt':'compersion'}],
  ['r69.gif', -300,0,750, {'txt':'epicaricacy'}],
  ['r72.gif', -600,0,600],
  ['r72.gif', -620,0,580, {'txt':'endomorphy'}],
  ['r22.gif', 0,0,600, {'txt':'rhamphorhynchus'}],
  ['r24.gif', 0,0,400, {'txt':'verisimilitudinous'}],
  ['r62.gif', 0,700,800, {'repeat':[3, 2, -400]}],
  ['r60.jpg', 0,900,1000, {'zx':3, 'zy':1, 'repeat':[3, 3, -400]}],
  ['r70.gif', 1100,0,600, {'txt':'lollygagger'}],
  ['r5.gif', -1200,300,600, {'txt':'homophilian'}],
  ['r6.gif', 1200,300,600, {'txt':'bysectamy'}],
  ['r54.gif', 0,0,100, {'txt':'iterator'}],
  ['r64.gif', 500,300,100],
  ['r38.gif', -900,0,350, {'txt':'protease'}],
  ['r51.gif', -600,0,400, {'txt':'gallipot'}],
  ['r52.gif', -300,0,250, {'txt':'temerarious'}],
  ['r50a.gif', -550,0,300, {'txt':'encyclopedia'}],
  ['r41.gif', -400,200,1000, {'txt':'paranoid'}],
  ['r43.gif', 300,400,1000, {'txt':'emboldened'}],
  ['r48.gif', 900,0,300, {'txt':'somnambulist'}],
  ['r58b.gif', 900,-20,250, {'txt':'miraculous'}],
  ['r63.gif', -1000,0,300, {'txt':'sufficiency'}],
  ['r63.gif', 650,0,320, {'txt':'biometric'}],
  ['r63.gif', 1000,0,980, {'txt':'baglady'}],
  ['Bush2.gif', -300,0,-200, {'repeat':[3, 3, -400]}],
  ['Bush2.gif', 300,0,-200, {'repeat':[3, 3, -400]}]
 ]);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="www_zzjs_net"></div>
</body>
</html>

关于超酷的三维展厅动画效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564642.shtml方便下次再访问哦。

·上一篇： 网页风格切换效果
·下一篇： 网页定时自动刷新效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

超酷的三维展厅动画效果

文章分类LIST >>返回首页

最新游戏

最新新闻