鼠标感应三维动画展示特效，这个动画特效有很强的立体效果，非常漂亮，根据自己的需求修改即可。
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>超酷的图片三维展示特效_武鸣人</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
cursor: default;
}
#www_wuming_ren {
position:absolute;
left: 0%;
top: 10%;
width: 100%;
height: 80%;
background: #000;
overflow: hidden;
}
#www_wuming_ren img {
position: absolute;
visibility: hidden;
left: -10000px;
filter: alpha(opacity=100);
}
#www_wuming_ren 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_wuming_ren .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('https://','')
+ '</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_wuming_ren ---- */
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';
}
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/* ==== 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_wuming_ren", "/img/", 300, 1, 12, '#666 solid 1px', '#fff dotted 1px', [
['20240311_www_wuming_ren_1.jpg', 0,20,1020, {'zx':9, 'zy':.5}],
['20240311_www_wuming_ren_2.gif', -1200,0,1000, {'txt':'duplicated'}],
['20240311_www_wuming_ren_3.gif', 700,0,1000, {'txt':'mechanomorphism'}],
['20240311_www_wuming_ren_4.gif', -1100,0,900, {'txt':'amniocentetic'}],
['20240311_www_wuming_ren_5.gif', 600,0,500, {'txt':'asphericity'}],
['20240311_www_wuming_ren_6.gif', -1000,0,200, {'txt':'onomatopoeia'}],
['20240311_www_wuming_ren_7.gif', -400,0,150, {'txt':'therianthrope'}],
['20240311_www_wuming_ren_8.gif', 400,0,150, {'txt':'arboretum'}],
['20240311_www_wuming_ren_9.gif', 1200,0,250, {'txt':'heliotrope'}],
['20240311_www_wuming_ren_10.gif', 0,0,900, {'txt':'', 'url':'https://www.wuming.ren'}],
['20240311_www_wuming_ren_11.gif', -400,0,950, {'txt':'santorum'}],
['20240311_www_wuming_ren_11.gif', 400,0,950, {'txt':'taphephobia'}],
['20240311_www_wuming_ren_12.gif', 700,0,800],
['20240311_www_wuming_ren_12.gif', 1100,0,800],
['20240311_www_wuming_ren_13.gif', 900,220,800, {'txt':'philatelical'}],
['20240311_www_wuming_ren_14.gif', 900,-20,740, {'txt':'salmagundi'}],
['20240311_www_wuming_ren_15.gif', -600,0,800, {'txt':'diverticulectomy'}],
['20240311_www_wuming_ren_16.gif', -750,0,900, {'zx':0.8, 'txt':'cerebrotonic'}],
['20240311_www_wuming_ren_17.gif', -900,0,750, {'txt':'compersion'}],
['20240311_www_wuming_ren_17.gif', -300,0,750, {'txt':'epicaricacy'}],
['20240311_www_wuming_ren_18.gif', -600,0,600],
['20240311_www_wuming_ren_18.gif', -620,0,580, {'txt':'endomorphy'}],
['20240311_www_wuming_ren_19.gif', 0,0,600, {'txt':'rhamphorhynchus'}],
['20240311_www_wuming_ren_20.gif', 0,0,400, {'txt':'verisimilitudinous'}],
['20240311_www_wuming_ren_21.gif', 0,700,800, {'repeat':[3, 2, -400]}],
['20240311_www_wuming_ren_22.jpg', 0,900,1000, {'zx':3, 'zy':1, 'repeat':[3, 3, -400]}],
['20240311_www_wuming_ren_23.gif', 1100,0,600, {'txt':'lollygagger'}],
['20240311_www_wuming_ren_24.gif', -1200,300,600, {'txt':'homophilian'}],
['20240311_www_wuming_ren_25.gif', 1200,300,600, {'txt':'bysectamy'}],
['20240311_www_wuming_ren_26.gif', 0,0,100, {'txt':'iterator'}],
['20240311_www_wuming_ren_27.gif', 500,300,100],
['20240311_www_wuming_ren_28.gif', -900,0,350, {'txt':'protease'}],
['20240311_www_wuming_ren_29.gif', -600,0,400, {'txt':'gallipot'}],
['20240311_www_wuming_ren_30.gif', -300,0,250, {'txt':'temerarious'}],
['20240311_www_wuming_ren_31.gif', -550,0,300, {'txt':'encyclopedia'}],
['20240311_www_wuming_ren_32.gif', -400,200,1000, {'txt':'paranoid'}],
['20240311_www_wuming_ren_33.gif', 300,400,1000, {'txt':'emboldened'}],
['20240311_www_wuming_ren_34.gif', 900,0,300, {'txt':'somnambulist'}],
['20240311_www_wuming_ren_14.gif', 900,-20,250, {'txt':'miraculous'}],
['20240311_www_wuming_ren_35.gif', -1000,0,300, {'txt':'sufficiency'}],
['20240311_www_wuming_ren_35.gif', 650,0,320, {'txt':'biometric'}],
['20240311_www_wuming_ren_35.gif', 1000,0,980, {'txt':'baglady'}],
['20240311_www_wuming_ren_36.gif', -300,0,-200, {'repeat':[3, 3, -400]}],
['20240311_www_wuming_ren_36.gif', 300,0,-200, {'repeat':[3, 3, -400]}]
]);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="www_wuming_ren"></div>
</body>
</html>本文来自武鸣人网站，转载请注明出处