永发信息网

谁能给个多个图片显示的炫酷效果代码啊?

答案:2  悬赏:50  手机版
解决时间 2021-04-29 00:13
随便什么代码,只要是多个图片的,效果要炫一点的。
最佳答案

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>6</title>
<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">
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 : [],
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 : 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; }

var ni = 0;
var n = (tv.grid.size / 2) - .5;
for (var y = -n; y <= n; y++)
{
for (var x = -n; x <= n; x++)
{

var o = document.createElement('img');
var i = img[(ni++) % img.length];
o.className = 'tvout';
o.src = i.src;
tv.screen.obj.appendChild(o);

o.point3D = {
x : x,
y : y,
z : new Library.ease()
};

o.point2D = {};
o.ratioImage = 1;
tv.O.push(o);

o.onmouseover = function ()
{
if (!tv.grid.zoomed)
{
if (tv.o)
{

tv.o.point3D.z.target = 0;
tv.o.className = 'tvout';
}

this.className = 'tvover';
this.point3D.z.target = -.5;
tv.o = this;
}
}

o.onclick = function ()
{
if (!tv.grid.zoomed)
{

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){

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;
}
}
}

o.calc = function ()
{

this.point3D.z.move(this.point3D.z.target, .5);

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;

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;

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
)
);

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);
}
}

o.draw = function ()
{
if (this.complete)
{

if (!this.loaded)
{
if (!this.img)
{

this.img = new Image();
this.img.src = this.src;
}
if (this.img.complete)
{

this.style.visibility = 'visible';
this.ratioImage = this.img.width / this.img.height;
this.loaded = true;
this.img = false;
}
}

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);
}
}
}
}

tv.resize();
mouse.y = tv.screen.y + tv.screen.h;
mouse.x = tv.screen.x + tv.screen.w;
tv.run();
},



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;
}
},



run : function ()
{

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);

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);

for (var i = 0, o; o = tv.O[i]; i++)
{
o.calc();
o.draw();
}

setTimeout(tv.run, 32);
}
}



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 src="images/wi23.jpg">
<img src="images/wt06.jpg">
<img src="images/wt47.jpg">
<img src="images/wt16.jpg">


<img src="images/wt43.jpg">
<img src="images/wt19.jpg">
<img src="images/wt27.jpg">
<img src="images/wt46.jpg">


<img src="images/wt14.jpg">
<img src="images/wt21.jpg">
<img src="images/wt35.jpg">
<img src="images/wt48.jpg">


<img src="images/wt55.jpg">
<img src="images/wt40.jpg">
<img src="images/wt53.jpg">
<img src="images/wt25.jpg">


</div>


<script type="text/javascript">

onresize = tv.resize;
tv.init();
</script>


</body>
</html>

全部回答
在网页制作器中的 <head> <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/> <style> v\:* { behavior: url(#default#VML); } </style> </head> <body> <SCRIPT> var slideurl=new Array() slideurl[0]="pic/blender.png" slideurl[1]="pic/aim.png" slideurl[2]="pic/babelfish.png" var slidelink=new Array() slidelink[0]=" http://butong.net" slidelink[1]=" http://bz.butong.net" slidelink[2]=" http://butong.net/it/index.htm" var slidetarget=new Array() slidetarget[0]="_blank" slidetarget[1]="_self" slidetarget[2]="_top" var backdepth=6 var fillcolor="#666666" var standstill=3 var imageform="oval" var slidewidth=1 var slideheight=1 var ns6=document.getElementById&&!document.all?1:0 var opera=navigator.userAgent.match(/Opera/) var ie5=document.getElementById&&document.all&&!opera?1:0 standstill*=1000 var floatingspeed=1 var tempo=20 var numberofimages=slideurl.length-1 var stepx=new Array() var stepy=new Array() for (i=0;i<=numberofimages;i++) { stepx[i]=randommakerNS(floatingspeed) stepy[i]=randommakerNS(floatingspeed) } var imgwidth=new Array() var imgheight=new Array() for (i=0;i<=numberofimages;i++) { imgwidth[i]=10 imgheight[i]=10 }var x,y var marginbottom var marginleft=0 var margintop=0 var marginright var timer var i_fadestrength=new Array() var i_fadestep=new Array() var i_fadenow=new Array() var i_fadenowmax=new Array() for (i=0;i<=slideurl.length;i++) { i_fadenowmax[i]=2 i_fadestrength[i]=randommakerNS(99) i_fadestep[i]=1 i_fadenow[i]=0 } var spancontent=new Array() var i_spancontent=0 var imgpreload=new Array() for (i=0;i<=slideurl.length;i++) { imgpreload[i]=new Image() imgpreload[i].src=slideurl[i] } for (i=0;i<=numberofimages;i++) { spancontent[i]="<a href='"+slidelink[i]+"' target='"+slidetarget[i]+"'><img src='"+slideurl[i]+"' border='0'></a>" } var i_angle1=0 var i_size=1 var i_pic=0 var posleft=0 var postop=0 var x_extrusionangle=0 var y_extrusionangle=0 var x_rotationcenter=0 var y_rotationcenter=0 var pagewidth var pageheight function initNS() { marginbottom=window.innerHeight-11 marginright=window.innerWidth-11 var thisspan=document.getElementById('span0') thisspan.innerHTML=spancontent[0] var thisspan=document.getElementById('span0') imgwidth[0]=parseInt(thisspan.offsetWidth) imgheight[0]=parseInt(thisspan.offsetHeight) var maxleftstart=marginright-imgwidth[0] var maxtopstart=marginbottom-imgheight[0] var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+randommakerNS(maxleftstart) thisspan.top=parseInt(thisspan.top)+randommakerNS(maxtopstart) thisspan.visibility="visible" checkmovementNS() } function randommakerNS(range) { rand=Math.floor(range*Math.random()) if (rand==0) {rand=Math.ceil(range/2)} return rand } function checkmovementNS() { checkpositionNS() movepicturesNS() timer=setTimeout("checkmovementNS()",tempo) } function movepicturesNS() { var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+stepx[0] thisspan.top=parseInt(thisspan.top)+stepy[0] i_fadenow[0]++ if (i_fadenow[0]>=i_fadenowmax[0]) { i_fadenow[0]=0 if (i_fadestrength[0]>=100) {i_fadestep[0]=i_fadestep[0]*-1} else if (i_fadestrength[0]<=0) { i_fadestep[0]=i_fadestep[0]*-1 i_spancontent++ if (i_spancontent>=spancontent.length) {i_spancontent=0} document.getElementById('span0').innerHTML=spancontent[i_spancontent] } } i_fadestrength[0]+=i_fadestep[0] document.getElementById('span0').style.MozOpacity=Math.round(i_fadestrength[0])/100 } function checkpositionNS() { imgwidth[0]=parseInt(document.getElementById('span0').offsetWidth) imgheight[0]=parseInt(document.getElementById('span0').offsetHeight) var thisspan=document.getElementById('span0').style var leftx=parseInt(thisspan.left) var topy=parseInt(thisspan.top) if (leftx>marginright-imgwidth[0]-floatingspeed) { thisspan.left=leftx-Math.abs(stepx[0]+1) stepx[0]=randommakerNS(floatingspeed)*-1 } if (leftx<marginleft) { thisspan.left=leftx+Math.abs(stepx[0]) stepx[0]=randommakerNS(floatingspeed) } if (topy>marginbottom-imgheight[0]-floatingspeed) { thisspan.top=topy-Math.abs(stepy[0]) stepy[0]=randommakerNS(floatingspeed)*-1 } if (topy<margintop) { thisspan.top=topy+Math.abs(stepy[0]) stepy[0]=randommakerNS(floatingspeed) } } function initIE() { var i_preload=0 for (i=0;i<=slideurl.length-1;i++) { var imgref=eval("document.n"+i) if (imgref.complete) {i_preload++} } if (i_preload>=slideurl.length-1) { slidewidth=document.getElementById('spn1').offsetWidth slideheight=document.getElementById('spn1').offsetHeight pagewidth=document.body.clientWidth pageheight=document.body.clientHeight document.getElementById('rectid').style.width=slidewidth document.getElementById('rectid').style.height=slideheight posleft=(pagewidth-slidewidth)/2 postop=(pageheight-slideheight)/2 x_rotationcenter=(posleft/slidewidth)/2 y_rotationcenter=(postop/slideheight)/2 var rotationcenter=0+","+y_rotationcenter+","+x_rotationcenter document.getElementById('rectid').style.left=posleft document.getElementById('rectid').style.top=postop document.getElementById('extrusionid').rotationcenter=rotationcenter rotateIE() }else { var timer=setTimeout("initIE()",200) } } function rotateIE() { i_angle1+=1 if (i_angle1>=360) { i_angle1=0 } if (i_angle1==127) { i_pic++ if (i_pic>=slideurl.length) {i_pic=0} document.getElementById('fillid').src=slideurl[i_pic] } document.getElementById('rectid').style.rotation=i_angle1 document.getElementById('extrusionid').rotationangle=i_angle1+","+i_angle1 var timer=setTimeout("rotateIE()",30) } function openpageIE() { if (slidetarget[i_pic]=="_blank") { window.open(slidelink[i_pic]) } else if (slidetarget[i_pic]=="_self") { document.location.href(slidelink[i_pic]) } else if (slidetarget[i_pic]=="_top" || slidetarget[i_pic]=="_parent") { top.location.href(slidelink[i_pic]) } } if (ns6) { document.write("<span id='span0' ></span>") document.close() window.onload=initNS } if (ie5) { document.write('<div id="preloadimages" >') for (i=0;i<=slideurl.length-1;i++) { document.write('<span id="spn'+i+'" >') document.write('<img src="'+slideurl[i]+'" name="n'+i+'">') document.write('</span>') } document.write('</div>') document.write('<v:'+imageform+' id="rectid" +slidewidth+';height:'+slideheight+'" onClick="openpageIE()">') document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" rotationcenter="0,0,0" backdepth="'+backdepth+'" diffusity="2.5" metal="true">') document.write('</v:extrusion>') document.write('<v:fill id="fillid" opacity="100%" color="'+fillcolor+'" type="frame" src="'+slideurl[0]+'"/>') document.write('</v:'+imageform+'>') window.onload=initIE } </script> </body> 就可以看到酷炫.....试试吧....
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
她这样是意思
为什麽土豆切完后放那会变成粉红色?
南城古玩城停车场地址在什么地方,想过去办事
求钺的专精 (附图)
我是1990年6月20下午五点五十八分生的!虎年
寄生草·漫揾英雄泪的作品注释
QQ三国出100级了吗?怎么我在网上看到90几级
45平民散打怎么过遗迹,求助
你喜欢他她喜欢你他喜欢她该怎么办?
第一次去女方家,她父母的表现,大家帮我分析一
为什么QQ农场升级那么慢呢
京东下单时怎么备注尺码
天下贰中59YL最少要有多少攻才算正常
跪求!东神的“我的小公主”中文版歌词
请问哪位朋友知道忘了密保密码还能改吗?
推荐资讯
当一个爱你的男生向你表白你会怎样?
系统字体(指在页面右击的菜单字体)可以更改
我爱她 我不知到她是否爱我怎么办
给姓刘的男孩取名字
闵行区有什么好玩的,上海市闵行区有什么好玩
衣厨的衣服变潮怎么办?
天谕金装项链和耳环在哪里做 金装项链和耳环
魔兽世界密码被改,提示问题答案也忘了,还有
如何查案底,如何在网上查到案底?
智力J竞猜,看谁知道
5mm厚的普通玻璃多少钱一平?
井水和人类的关系
正方形一边上任一点到这个正方形两条对角线的
阴历怎么看 ?