页面特效超酷的导航特技 旋转旋转
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<style>div {
position: absolute
}
div.clbutton {
height: 20px; top: -200px; width: 20px
}
#divstat {
height: 20px; left: 8px; top: 12px; width: 130px
}
#divstatcont {
height: 45px; top: -200px; width: 125px
}
span.clstat {
color: #606fa2; font-family: arial,helvetica; font-size: 10px
}
#divdhtml {
top: 20px; width: 100px
}
div.cllink {
font-family: arial,helvetica; font-size: 12px; font-weight: bold; visibility: hidden
}
#divexplain {
font-family: arial,helvetica; font-size: 12px
}
</style>
第二步：把如下代码加入到<body>区域中
<script>
function checkbrowser(){
this.ver=navigator.appversion
this.dom=document.getelementbyid?1:0
this.ie5=(this.ver.indexof("msie 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseint(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.ie=this.ie4||this.ie5
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkbrowser()
//preload
function preload(){
for(i=0;i<arguments.length;i++){
this=new image()
this.src=arguments
}
return this
}
//place your images in here
imgbutletter=new preload("http://ww.jojoo.net/include/1.jpg","http://www.jojoo.net/include/2.jpg","http://www.jojoo.net/include/4.jpg","http://www.jojoo.net/include/2.jpg","http://www.jojoo.net/include/3.jpg")
imgbutcircle=new preload("http://www.jojoo.net/include/5.jpg","http://www.jojoo.net/include/2.jpg","http://www.jojoo.net/include/6.jpg","http://www.jojoo.net/include/2.jpg","http://www.jojoo.net/include/2.jpg")
//how many "balls" do you have
numballs=5
function makepagecoords(){
this.x=0;this.x2=(bw.ns4 || bw.ns5)?innerwidth:document.body.offsetwidth-20;
this.y=0;this.y2=(bw.ns4 || bw.ns5)?innerheight:document.body.offsetheight-5;
this.x50=this.x2/2; this.y50=this.y2/2;
return this;
}
function makeobj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getelementbyid(obj):bw.ie4?document.all:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getelementbyid(obj).style:bw.ie4?document.all.style:bw.ns4?eval(nest+'document.'+obj):0;
this.ref=bw.ns4?this.css.document:document;
this.width=bw.ns4?this.css.document.width:this.el.offsetwidth
this.moveby=b_moveby; this.moveit=b_moveit; this.writeit=b_writeit;
this.slide=b_slide; this.slideit=b_slideit;
this.showit=b_showit; this.hideit=b_hideit;
this.obj = obj + "object"; eval(this.obj + "=this")
}
function b_moveit(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_moveby(x,y){this.x+=x; this.y+=y; this.css.left=this.x; this.css.top=this.y}
function b_showit(){this.css.visibility="visible"}
function b_hideit(){this.css.visibility="hidden"}
function b_writeit(text){
if(bw.ns4){this.ref.write(text);this.ref.close()}
else this.el.innerhtml=text
}
function s_writeit(text){
text='<span class="clstat">'+text+'</span>'
this.write(text)
}
function b_slideit(endx,endy,inc,speed,fn,wh) {
if (!this.slideactive) {var distx = endx - this.x;var disty = endy - this.y
var num = math.sqrt(math.pow(distx,2) + math.pow(disty,2))/inc
var dx = distx/num;var dy = disty/num
this.slideactive = 1; this.slide(dx,dy,endx,endy,speed,fn,wh)}}
function b_slide(dx,dy,endx,endy,speed,fn,wh) {
if (!fn) fn = null; if(!wh) wh=null
if (this.slideactive && (math.floor(math.abs(dx))<math.floor(math.abs(endx-this.x)) || math.floor(math.abs(dy))<math.floor(math.abs(endy-this.y)))) {
this.moveit(this.x+dx,this.y+dy); eval(wh)
slidtim=settimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{this.slideactive = 0;this.moveit(endx,endy);eval(fn)}}
/************************************************************************************************
initiating page. setting variables. making objects. starting animation
***********************************************************************************************/
function ballinit(){
page=new makepagecoords()
//set the stop placements of each ball:
ballxstop=new array(page.x50-70,page.x50-40,page.x50-10,page.x50+20,page.x50+50)
ballystop=new array(page.y50-12,page.y50-12,page.y50-12,page.y50-12,page.y50-12)
//set the angles of each ball
angles=new array(-180,-90,0,90,180)
obut=new array()
for(i=0;i<numballs;i++){
obut=new makeobj('divbut'+i)
obut.text=new makeobj('divlink'+i)
obut.moveit(i*100,-50)
}
ostat=new makeobj('divstat','divstatcont')
ostat.write=b_writeit;
ostat.writeit=s_writeit;
ostatcont=new makeobj('divstatcont')
ostatcont.moveit(page.x2-135,page.y2-50)
odhtml=new makeobj('divdhtml')
odhtml.moveit(page.x50-72,page.y50-13)
doball()
}
/************************************************************************************************
ballpart start
***********************************************************************************************/
var ballbottom
var balltop=0
var ballspeed=25
var ballright
var ballleft=0
var xsling=60
var ysling=20
var got=0
ballgoing=true;
function fall(count){
var fover=false
for(var i=0;i<obut.length;i++){
if(obut.ball.ready){
num=math.round(math.random()*4)
obut.ref["imgbut"+i].src=imgbutletter.src
if(count==400 || count==550 || count==700){
obut.ball.movexpx-=2
obut.ball.moveypx+=2
}
fover=true
if(obut.y<ballbottom && !obut.ball.way){
if(obut.x>ballright-16 && obut.x<ballright) obut.ball.xmove=-obut.ball.movexpx
else if(obut.x>ballleft-8 && obut.x<ballleft+8) obut.ball.xmove=obut.ball.movexpx
obut.moveby(obut.ball.xmove,obut.ball.moveypx)
obut.ball.way=0
}else{
obut.ball.way=1
}
if(obut.y>balltop && obut.ball.way){
if(obut.x>ballright-16 && obut.x<ballright) obut.ball.xmove=-obut.ball.movexpx
else if(obut.x>ballleft-8 && obut.x<ballleft+8) obut.ball.xmove=obut.ball.movexpx
obut.moveby(obut.ball.xmove,-obut.ball.moveypx)
obut.ball.way=1
}else{
obut.ball.way=0
}
if((obut.x>obut.ball.xpos-xsling && obut.x<obut.ball.xpos+xsling) && (obut.y>obut.ball.ypos-ysling && obut.y<obut.ball.ypos+ysling)){
obut.ball.ready=false
obut.ref["imgbut"+i].src=imgbutletter.src
obut.slideit(obut.ball.xpos,obut.ball.ypos,3,10)
got++
if(got!=obut.length) ostat.writeit('看到效果了没...<br>'+got +' placed, '+ (obut.length-got) +' to go')
else{
afterball()
}
}
}
}
count++
if(fover)settimeout("fall("+count+")",ballspeed)
}
function makeball(xspeed,yspeed,xpos,ypos){
this.xpos=xpos
this.ypos=ypos
this.way=0
this.ready=true
this.movexpx=xspeed
this.moveypx=yspeed
num=math.round(math.random())
if(num) this.xmove=4
else this.xmove=-4
return this
}
function doball(){
ostat.writeit('javascript fairyland')
ballbottom=(bw.ie)?page.y2-27:page.y2-10;
ballright=(bw.ie)?page.x2-27:page.x2-5;
for(i=0;i<obut.length;i++){
num=math.round(math.random()*3)
obut.ball=new makeball(16-num-1,16-num,ballxstop,ballystop)
}
fall(0)
}
/************************************************************************************************
ball part end
***********************************************************************************************/
/************************************************************************************************
after ball part
***********************************************************************************************/
function afterball(){
ostat.writeit('javascript fairyland')
ballgoing=false
settimeout("odhtml.hideit(); ostat.writeit('making circles'); stopletter("+obut.length+")",300)
}
function stopletter(num){
if(num>0){
num--
obut.ref["imgbut"+num].src=imgbutcircle.src
settimeout("stopletter("+num+")",100)
}else{
ostat.writeit('javascript fairyland')
slidecircles(0)
}
}
function slidecircles(num){
if(num<30){
for(i=0;i<obut.length;i++){obut.moveby(-4+(i*2),0)}
num++; settimeout("slidecircles("+num+")",40)
}else{
ostat.writeit('javascript fairyland')
c_left=obut.x; c_top=obut.y; circlecircles(0,0)
}
}
var c_left,c_top; var angle=0;
function circlecircles(num,speed){
if(num<361){
for(i=0;i<obut.length;i++){obut.moveit(math.round(c_left + angles*math.cos(angle*math.pi/180)),math.round(c_top + angles*math.sin(angle*math.pi/180)))}
angle+=speed;
if(num<180) speed=speed+0.2; else speed=speed-0.2
num++;settimeout("circlecircles("+num+","+speed+")",15)
}else{
end(0)
}
}
function end(num){
if(num<obut.length){
obut.text.moveit((obut.x+17)-(obut.text.width/2),obut.y+30)
obut.text.showit()
num++
settimeout("end("+num+")",100)
}else{
ostat.writeit('javascript fairyland')
}
}
/************************************************************************************************
after ball part end
***********************************************************************************************/
//starting animation of page load.
onload=ballinit;
</script>
<div id=divexplain></div><!-- stat part -->
<div id=divstatcont><img alt="" border=0 height=43
src="../wydh/images/98/status.gif" width=125>
http://code.ik8.com/html/../wydh/images/98/status.gif<div id=divstat></div></div><!-- menu -->
<div id=divdhtml><img alt="" border=0 height=32
src="../wydh/images/98/dhtml.gif" width=144> http://code.ik8.com/html/../wydh/images/98/dhtml.gif</div><!-- place your links in the hrefs below -->
<div class=clbutton id=divbut0><a
href="link.htm"><img alt=""
border=0 height=25 name=imgbut0 src="../wydh/images/98/letter_1.gif"
width=25>http://code.ik8.com/html/../wydh/images/98/letter_1.gif</a> </div>
<div class=clbutton id=divbut1><a
href="link.htm"><img alt=""
border=0 height=25 name=imgbut1 src="../wydh/images/98/letter_2.gif"
width=25>http://code.ik8.com/html/../wydh/images/98/letter_2.gif</a> </div>
<div class=clbutton id=divbut2><a
href="link.htm"><img alt=""
border=0 height=25 name=imgbut2 src="../wydh/images/98/letter_3.gif"
width=25>http://code.ik8.com/html/../wydh/images/98/letter_3.gif</a> </div>
<div class=clbutton id=divbut3><a
href="link.htm"><img alt=""
border=0 height=25 name=imgbut3 src="../wydh/images/98/letter_4.gif"
width=25>http://code.ik8.com/html/../wydh/images/98/letter_4.gif</a> </div>
<div class=clbutton id=divbut4><a
href="link.htm"><img alt=""
border=0 height=25 name=imgbut4 src="../wydh/images/98/letter_5.gif"
width=25>http://code.ik8.com/html/../wydh/images/98/letter_5.gif</a> </div>
<div class=cllink id=divlink0>link 1 </div>
<div class=cllink id=divlink1>link 2 </div>
<div class=cllink id=divlink2>link 3 </div>
<div class=cllink id=divlink3>link 4 </div>
<div class=cllink id=divlink4>link 5 </div>
页:
[1]