fingh 发表于 2007-4-27 11:57:38

***页面特效***当你指向某个链接时,网页中的小球会自动跑过去

把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件
要完成此效果把如下代码加入到<body>区域中

<style type="text/css">
#divcircle   {position:absolute; width:10px; height:100px; z-index:1; top:-50px;}
.clbuttons   {position:absolute; width:50px; height:10px; top:20px;left:100px; visibility:hidden; z-index:10; font-family:新細明體; font-size:10pt;}
.clbuttons a   {    color:#000080;    }
</style>
<script language="javascript" type="text/javascript">
function lib_bwcheck(){ //browsercheck (needed)
    this.ver=navigator.appversion
    this.agent=navigator.useragent
    this.dom=document.getelementbyid?1:0
    this.opera5=this.agent.indexof("opera 5")>-1
    this.ie5=(this.ver.indexof("msie 5")>-1 && this.dom && !this.opera5)?1:0;
    this.ie6=(this.ver.indexof("msie 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexof("mac")>-1
    this.ns6=(this.dom && parseint(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return this
}
var bw=new lib_bwcheck()
numitems = 4
circlexstart = 10
circleystart = -25
circlexoffset = 5
circleyoffset = -3
circlepxspeed = 5
circletspeed = 10
circlestay = 1
function makeobj(obj,nest,x,y){
    nest = (!nest)?"":'document.'+nest+'.'      
    this.css = bw.dom?document.getelementbyid(obj).style:bw.ie4?document.all.style:bw.ns4?eval(nest+'document.'+obj):0
    this.evnt = bw.dom?document.getelementbyid(obj):bw.ie4?document.all:bw.ns4?this.css:0
    this.showit = b_showit
    this.moveit = b_moveit
    this.slide = b_slide
    this.slideit = b_slideit
    this.obj = obj+"object"
    eval(this.obj+"=this")
    return this
}
var px = bw.ns4||window.opera?"":"px";

function b_moveit(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_showit(){this.css.visibility="visible"}
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)
    }
}
function slideballinit(){
    obut = new array()
    for (var i=0; i<=numitems; i++){
      obut = new makeobj('divbutton'+i)
    }
    ocircle = new makeobj('divcircle')
    obut.moveit(250,100)
    obut.moveit(310,100)
    obut.moveit(370,100)
    obut.moveit(420,100)
    obut.moveit(480,100)
    ocircle.moveit(circlexstart,circleystart)
    //showing the buttons
    for(var i=0; i<=numitems; i++){
      obut.showit()
    }
}
var slidtim = 100;
var active = -1
function sbmover(num){
    cleartimeout(slidtim)
    ocircle.slideactive = false
    ocircle.slideit(obut.x+circlexoffset,obut.y+circleyoffset,circlepxspeed,circletspeed)
}
function sbmout(num){
    cleartimeout(slidtim)
    ocircle.slideactive = false
    if (active>-1 && circlestay) ocircle.slideit(obut.x+circlexoffset,obut.y+circleyoffset,circlepxspeed,circletspeed)
    else ocircle.slideit(circlexstart,circleystart,circlepxspeed,circletspeed)
}
function changelisting(num){
    active = num
}
if(bw.bw) onload = slideballinit;
</script>
<div id="divbutton0" class="clbuttons">
<a href="#" onmouseover="sbmover(0)" onmouseout="sbmout(0)" onclick="changelisting(0); return false">链接1</a>
</div>
<div id="divbutton1" class="clbuttons">
<a href="#" onmouseover="sbmover(1)" onmouseout="sbmout(1)" onclick="changelisting(1); return false">链接2</a>
</div>
<div id="divbutton2" class="clbuttons">
<a href="#" onmouseover="sbmover(2)" onmouseout="sbmout(2)" onclick="changelisting(2); return false">链接3</a>
</div>
<div id="divbutton3" class="clbuttons">
<a href="#" onmouseover="sbmover(3)" onmouseout="sbmout(3)" onclick="changelisting(3); return false">链接4</a>
</div>
<div id="divbutton4" class="clbuttons">
<a href="#" onmouseover="sbmover(4)" onmouseout="sbmout(4)" onclick="changelisting(4); return false">链接5</a>
</div>
<div id="divcircle">
<img src="../wydh/images/149/trail4.gif" width="22" height="21" border="0">
http://code.ik8.com/html/../wydh/images/149/trail4.gif</div>
      










--------------------------------------

http://www.huoyue.com.cn 活跃网,活跃人群的论坛,访问活跃网,将给您带来意想不到的收获,还可以免费为您开论坛,让您免费拥有与朋友、网友交流的论坛。你是年轻人吗?你活跃你就上!
页: [1]
查看完整版本: ***页面特效***当你指向某个链接时,网页中的小球会自动跑过去