管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

javascript 多图浏览超炫效果

javascript 多图浏览超炫效果

　　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Wanna tell her - interactive DHTML </title> 
<meta http-equiv="imagetoolbar" content="no"> 
<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>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F*%20%3D%3D%3D%3D%20Easing%20function%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20Library%20%3D%20%7B%7D%3B%20%0D%0ALibrary.ease%20%3D%20function%20()%20%7B%20%0D%0Athis.target%20%3D%200%3B%20%0D%0Athis.position%20%3D%200%3B%20%0D%0Athis.move%20%3D%20function%20(target%2C%20speed)%20%7B%20%0D%0Athis.position%20%2B%3D%20(target%20-%20this.position)%20*%20speed%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20tv%20%3D%20%7B%20%0D%0A%2F*%20%3D%3D%3D%3D%20variables%20%3D%3D%3D%3D%20*%2F%20%0D%0AO%20%3A%20%5B%5D%2C%20%0D%0Afps%20%3A%200%2C%20%0D%0Ascreen%20%3A%20%7B%7D%2C%20%0D%0Aangle%20%3A%20%7B%20%0D%0Ax%20%3A%20new%20Library.ease()%2C%20%0D%0Ay%20%3A%20new%20Library.ease()%20%0D%0A%7D%2C%20%0D%0Acamera%20%3A%20%7B%20%0D%0Ax%20%3A%20new%20Library.ease()%2C%20%0D%0Ay%20%3A%20new%20Library.ease()%20%0D%0A%7D%2C%20%0D%0Acreate3DHTML%20%3A%20function%20(i%2C%20x%2C%20y%2C%20z%2C%20sw%2C%20sh)%20%7B%20%0D%0A%2F*%20%3D%3D%3D%3D%20create%20HTML%20image%20element%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20o%20%3D%20document.createElement('img')%3B%20%0D%0Ao.src%20%3D%20i.src%3B%20%0D%0Atv.screen.obj.appendChild(o)%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%203D%20coordinates%20%3D%3D%3D%3D%20*%2F%20%0D%0Ao.point3D%20%3D%20%7B%20%0D%0Ax%20%3A%20x%2C%20%0D%0Ay%20%3A%20y%2C%20%0D%0Az%20%3A%20new%20Library.ease()%2C%20%0D%0Asw%20%3A%20sw%2C%20%0D%0Ash%20%3A%20sh%2C%20%0D%0Aw%20%3A%20i.width%2C%20%0D%0Ah%20%3A%20i.height%20%0D%0A%7D%3B%20%0D%0Ao.point3D.z.target%20%3D%20z%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20push%20object%20%3D%3D%3D%3D%20*%2F%20%0D%0Ao.point2D%20%3D%20%7B%7D%3B%20%0D%0Atv.O.push(o)%3B%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20on%20mouse%20over%20event%20%3D%3D%3D%3D%20*%2F%20%0D%0Ao.onmouseover%20%3D%20function%20()%20%7B%20%0D%0Aif%20(this%20!%3D%20tv.o)%20%7B%20%0D%0Athis.point3D.z.target%20%3D%20tv.mouseZ%3B%20%0D%0Atv.camera.x.target%20%3D%20this.point3D.x%3B%20%0D%0Atv.camera.y.target%20%3D%20this.point3D.y%3B%20%0D%0Aif%20(tv.o)%20tv.o.point3D.z.target%20%3D%200%3B%20%0D%0Atv.o%20%3D%20this%3B%20%0D%0A%7D%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20on%20mousedown%20event%20%3D%3D%3D%3D%20*%2F%20%0D%0Ao.onmousedown%20%3D%20function%20()%20%7B%20%0D%0Aif%20(this%20%3D%3D%20tv.o)%20%7B%20%0D%0Aif%20(this.point3D.z.target%20%3D%3D%20tv.mouseZ)%20this.point3D.z.target%20%3D%200%3B%20%0D%0Aelse%20%7B%20%0D%0Atv.o%20%3D%20false%3B%20%0D%0Athis.onmouseover()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20main%203D%20function%20%3D%3D%3D%3D%20*%2F%20%0D%0Ao.animate%20%3D%20function%20()%20%7B%20%0D%0A%2F*%20%3D%3D%3D%3D%203D%20coordinates%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20x%20%3D%20this.point3D.x%20-%20tv.camera.x.position%3B%20%0D%0Avar%20y%20%3D%20this.point3D.y%20-%20tv.camera.y.position%3B%20%0D%0Athis.point3D.z.move(this.point3D.z.target%2C%20this.point3D.z.target%20%3F%20.15%20%3A%20.08)%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20rotations%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20xy%20%3D%20tv.angle.cx%20*%20y%20-%20tv.angle.sx%20*%20this.point3D.z.position%3B%20%0D%0Avar%20xz%20%3D%20tv.angle.sx%20*%20y%20%2B%20tv.angle.cx%20*%20this.point3D.z.position%3B%20%0D%0Avar%20yz%20%3D%20tv.angle.cy%20*%20xz%20-%20tv.angle.sy%20*%20x%3B%20%0D%0Avar%20yx%20%3D%20tv.angle.sy%20*%20xz%20%2B%20tv.angle.cy%20*%20x%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%202D%20transform%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20scale%20%3D%20tv.camera.focalLength%20%2F%20(tv.camera.focalLength%20%2B%20yz)%3B%20%0D%0Ax%20%3D%20yx%20*%20scale%3B%20%0D%0Ay%20%3D%20xy%20*%20scale%3B%20%0D%0Avar%20w%20%3D%20Math.round(Math.max(0%2C%20this.point3D.w%20*%20scale%20*%20this.point3D.sw))%3B%20%0D%0Avar%20h%20%3D%20Math.round(Math.max(0%2C%20this.point3D.h%20*%20scale%20*%20this.point3D.sh))%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20HTML%20rendering%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20o%20%3D%20this.style%3B%20%0D%0Ao.left%20%3D%20Math.round(x%20%2B%20tv.screen.w%20-%20w%20*%20.5)%20%2B%20'px'%3B%20%0D%0Ao.top%20%3D%20Math.round(y%20%2B%20tv.screen.h%20-%20h%20*%20.5)%20%2B%20'px'%3B%20%0D%0Ao.width%20%3D%20w%20%2B%20'px'%3B%20%0D%0Ao.height%20%3D%20h%20%2B%20'px'%3B%20%0D%0Ao.zIndex%20%3D%2010000%20%2B%20Math.round(scale%20*%201000)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20init%20script%20%3D%3D%3D%3D%20*%2F%20%0D%0Ainit%20%3A%20function%20(structure%2C%20FL%2C%20mouseZ%2C%20rx%2C%20ry)%20%7B%20%0D%0Athis.screen.obj%20%3D%20document.getElementById('screen')%3B%20%0D%0Athis.screen.obj.onselectstart%20%3D%20function%20()%20%7B%20return%20false%3B%20%7D%20%0D%0Athis.screen.obj.ondrag%20%3D%20function%20()%20%7B%20return%20false%3B%20%7D%20%0D%0Athis.mouseZ%20%3D%20mouseZ%3B%20%0D%0Athis.camera.focalLength%20%3D%20FL%3B%20%0D%0Athis.angle.rx%20%3D%20rx%3B%20%0D%0Athis.angle.ry%20%3D%20ry%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20create%20objects%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20i%20%3D%200%2C%20o%3B%20%0D%0Awhile(%20o%20%3D%20structure%5Bi%2B%2B%5D%20)%20%0D%0Athis.create3DHTML(o.img%2C%20o.x%2C%20o.y%2C%20o.z%2C%20o.sw%2C%20o.sh)%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20start%20script%20%3D%3D%3D%3D%20*%2F%20%0D%0Athis.resize()%3B%20%0D%0Amouse.y%20%3D%20this.screen.y%20%2B%20this.screen.h%3B%20%0D%0Amouse.x%20%3D%20this.screen.x%20%2B%20this.screen.w%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20loop%20%3D%3D%3D%3D%20*%2F%20%0D%0AsetInterval(tv.run%2C%2016)%3B%20%0D%0AsetInterval(tv.dFPS%2C%201000)%3B%20%0D%0A%7D%2C%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20resize%20window%20%3D%3D%3D%3D%20*%2F%20%0D%0Aresize%20%3A%20function%20()%20%7B%20%0D%0Avar%20o%20%3D%20tv.screen.obj%3B%20%0D%0Aif%20(o)%20%7B%20%0D%0Atv.screen.w%20%3D%20o.offsetWidth%20%2F%202%3B%20%0D%0Atv.screen.h%20%3D%20o.offsetHeight%20%2F%202%3B%20%0D%0Afor%20(tv.screen.x%20%3D%200%2C%20tv.screen.y%20%3D%200%3B%20o%20!%3D%20null%3B%20o%20%3D%20o.offsetParent)%20%7B%20%0D%0Atv.screen.x%20%2B%3D%20o.offsetLeft%3B%20%0D%0Atv.screen.y%20%2B%3D%20o.offsetTop%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20main%20loop%20%3D%3D%3D%3D%20*%2F%20%0D%0Arun%20%3A%20function%20()%20%7B%20%0D%0Atv.fps%2B%2B%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20motion%20ease%20%3D%3D%3D%3D%20*%2F%20%0D%0Atv.angle.x.move(-(mouse.y%20-%20tv.screen.h%20-%20tv.screen.y)%20*%20tv.angle.rx%2C%20.1)%3B%20%0D%0Atv.angle.y.move(%20(mouse.x%20-%20tv.screen.w%20-%20tv.screen.x)%20*%20tv.angle.ry%2C%20.1)%3B%20%0D%0Atv.camera.x.move(tv.camera.x.target%2C%20.025)%3B%20%0D%0Atv.camera.y.move(tv.camera.y.target%2C%20.025)%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20angles%20sin%20and%20cos%20%3D%3D%3D%3D%20*%2F%20%0D%0Atv.angle.cx%20%3D%20Math.cos(tv.angle.x.position)%3B%20%0D%0Atv.angle.sx%20%3D%20Math.sin(tv.angle.x.position)%3B%20%0D%0Atv.angle.cy%20%3D%20Math.cos(tv.angle.y.position)%3B%20%0D%0Atv.angle.sy%20%3D%20Math.sin(tv.angle.y.position)%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20loop%20through%20images%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20i%20%3D%200%2C%20o%3B%20%0D%0Awhile(%20o%20%3D%20tv.O%5Bi%2B%2B%5D%20)%20o.animate()%3B%20%0D%0A%7D%2C%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20trace%20frames%20per%20seconds%20%3D%3D%3D%3D%20*%2F%20%0D%0AdFPS%20%3A%20function%20()%20%7B%20%0D%0Adocument.getElementById('FPS').innerHTML%20%3D%20tv.fps%20%2B%20'%20FPS'%3B%20%0D%0Atv.fps%20%3D%200%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20global%20mouse%20position%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20mouse%20%3D%20%7B%20%0D%0Ax%20%3A%200%2C%20%0D%0Ay%20%3A%200%20%0D%0A%7D%20%0D%0Adocument.onmousemove%20%3D%20function(e)%20%7B%20%0D%0Aif%20(window.event)%20e%20%3D%20window.event%3B%20%0D%0Amouse.x%20%3D%20e.clientX%3B%20%0D%0Amouse.y%20%3D%20e.clientY%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%20%3D%3D%3D%3D%20starting%20script%20%3D%3D%3D%3D%20*%2F%20%0D%0Aonload%20%3D%20function()%20%7B%20%0D%0Aonresize%20%3D%20tv.resize%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20build%20grid%20%3D%3D%3D%3D%20*%2F%20%0D%0Avar%20img%20%3D%20document.getElementById('bankImages').getElementsByTagName('img')%3B%20%0D%0Avar%20structure%20%3D%20%5B%5D%3B%20%0D%0Afor%20(var%20i%20%3D%20-300%3B%20i%20%3C%3D%20300%3B%20i%20%2B%3D%20120)%20%0D%0Afor%20(var%20j%20%3D%20-300%3B%20j%20%3C%3D%20300%3B%20j%20%2B%3D%20120)%20%0D%0Astructure.push(%7B%20img%3Aimg%5B0%5D%2C%20x%3Ai%2C%20y%3Aj%2C%20z%3A0%2C%20sw%3A.5%2C%20sh%3A.5%20%7D)%3B%20%0D%0A%2F*%20%3D%3D%3D%3D%20let's%20go%20%3D%3D%3D%3D%20*%2F%20%0D%0Atv.init(structure%2C%20350%2C%20-200%2C%20.005%2C%20.0025)%3B%20%0D%0A%7D%20%0D%0A%0D%0A%3C%2Fscript%3E"> 
</head>

<body>

<div id="screen"> </div>

<div id="bankImages"> 
<img alt="" src="http://files.glzy8.com/demoimg/200912/cicadu.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F200912%2Fcicadu.jpg"> 
</div> 
<div id="FPS"> </div>

</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程