 | 项目搜索 |
|
| |
|
|
代码片段库:
查看代码片段
浏览
| 提交新的代码片段
| 创建代码包
跟随链接的小球
|
类型:
Full Script |
类别:
HTML Manipulation
|
许可证:
GNU General Public License |
语言:
JavaScript
|
描述:
在文字链接上出现一个飞过来的小球，效果不错 来源：http://www.baron.com.cn
|
该代码片段的版本系列:
| 片段ID |
下载版本 |
提交时间 |
提交人 |
删除 |
| 4821 | 1.0 | 2003-10-25 17:27 | cbd001 |  |
点击"下载版本"来下载该代码片段.
最新版本的代码片段: 1.0
脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
.clButtons{position:absolute; width:47; height:10; top:20; visibility:hidden; z-index:10; font-family:arial,helvetica; font-size:12px}
#divCircle{position:absolute; width:10; height:10; z-index:1; top:-50}
</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()
//Variables to set
numItems=4 //How many menuitems do you want?
circleXstart=100 //Where should the circle start and end, x position
circleYstart=-20 //Where should the circle start and end, y position
circleXoffset=5 //The offset between the buttons X position and the circles X position on mouseover
circleYoffset=-3 //The offset between the buttons Y position and the circles Y position on mouseover
circlePXspeed=5 //How many pixels the circle will move per timeout
circleTspeed=10 //Timeout speed in milliseconds
circleStay=1 //Set this to 0 if you don't want the circle to stay on the active link when a link is clicked.
//NOTE: To set the placement of the buttons, see the slideball_init() function!
/****************************************************************************
Cross-browser object part...You should not need to edit anything this
part.
****************************************************************************/
function makeObj(obj,nest,x,y){nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.evnt=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]: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}
function b_showIt(){this.css.visibility="visible"}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
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)}}
/****************************************************************************
The init function. This is where you set the placement of the Buttons.
****************************************************************************/
function slideball_init(){
oBut=new Array()
for(i=0;i<=numItems;i++){
oBut[i]=new makeObj('divButton'+i)
}
oCircle=new makeObj('divCircle')
//Set the placement of each individual button below.
//Syntax: oBut[num].moveIt(xplacement,yplacement)
oBut[0].moveIt(50,200)
oBut[1].moveIt(110,200)
oBut[2].moveIt(170,200)
oBut[3].moveIt(230,200)
oBut[4].moveIt(280,200)
oCircle.moveIt(circleXstart,circleYstart)
//Showing the buttons
for(i=0;i<=numItems;i++){
oBut[i].showIt()
}
}
/****************************************************************************
Mouseover and mouseout functions.
****************************************************************************/
var slidTim=100;
var active=-1
function sbmover(num){
clearTimeout(slidTim)
oCircle.slideactive=false
oCircle.slideIt(oBut[num].x+circleXoffset,oBut[num].y+circleYoffset,circlePXspeed,circleTspeed)
}
function sbmout(num){
clearTimeout(slidTim)
oCircle.slideactive=false
if(active>-1 && circleStay)oCircle.slideIt(oBut[active].x+circleXoffset,oBut[active].y+circleYoffset,circlePXspeed,circleTspeed)
else oCircle.slideIt(circleXstart,circleYstart,circlePXspeed,circleTspeed)
}
function changeListing(num){
active=num
}
//Starting the script when the balls load.
if(bw.bw) onload=slideball_init;
</script>
<div id="divButton0" class="clButtons"><a href="http://www.163.com" onmouseover="sbmover(0)" onmouseout="sbmout(0)" onclick="changeListing(0); return false">网易</a></div>
<div id="divButton1" class="clButtons"><a href="http://www.sina.com.cn" onmouseover="sbmover(1)" onmouseout="sbmout(1)" onclick="changeListing(1); return false">新浪</a></div>
<div id="divButton2" class="clButtons"><a href="http://www.sohu.com" onmouseover="sbmover(2)" onmouseout="sbmout(2)" onclick="changeListing(2); return false">搜狐</a></div>
<div id="divButton3" class="clButtons"><a href="http://www.the9.com" onmouseover="sbmover(3)" onmouseout="sbmout(3)" onclick="changeListing(3); return false">九城</a></div>
<div id="divButton4" class="clButtons"><a href="http://www.yahoo.com.cn" onmouseover="sbmover(4)" onmouseout="sbmout(4)" onclick="changeListing(4); return false">雅虎</a></div>
<div id="divCircle"><img src="circle.gif" width=23 height=22 alt="" border="0"></div>
如果您修改了一个代码片段并且觉得很应该让别人共享,您可以把这作为这个代码片段的最新版本提交上来. |
|
