Главная » 2010 » Август » 2 » Кружок подлетает к ссылке (Javascript)
02.08.2010, 10:47

Кружок подлетает к ссылке



На скрине нифига не видно, поэтому ставим и смотрим.

Прикольный скрипт. Если навести курсор на ссылку, то к ней подлетит серый кружок (конечно, картинку можно и заменить). А если нажать на нее, то кружок останется на ссылке.

В head вставляем это:

Quote
<style type="text/css">
#divCircle {position:absolute; width:10px; height:10px; z-index:1; top:-50px;}
.clButtons {position:absolute; width:47px; height:10px; top:20px; visibility:hidden; z-index:10; font-family:arial,helvetica,sans-serif; font-size:12px;}
.clButtons a {color:#333366;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
SlideBall
* Copyright © 2001 Thomas Brattli
* This script was released at WOscripts.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*********************************************************************************/

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 = -25 //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
}

// A unit of measure that will be added when setting the position of a layer.
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)
}
}

/****************************************************************************
The init function. This is where you set the placement of the Buttons.
****************************************************************************/
function slideballInit(){
oBut = new Array()
for (var 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,150)
oBut[1].moveIt(110,150)
oBut[2].moveIt(170,150)
oBut[3].moveIt(230,150)
oBut[4].moveIt(280,150)
oCircle.moveIt(circleXstart,circleYstart)
//Showing the buttons
for(var 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 = slideballInit;

/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>

Красное - скорость движения кружка.

В body - это:

Quote

<div id="divButton0" class="clButtons"><a href="#" onmouseover="sbmover(0)" onmouseout="sbmout(0)" onclick="changeListing(0); return false">Link 1</a></div>
<div id="divButton1" class="clButtons"><a href="#" onmouseover="sbmover(1)" onmouseout="sbmout(1)" onclick="changeListing(1); return false">Link 2</a></div>
<div id="divButton2" class="clButtons"><a href="#" onmouseover="sbmover(2)" onmouseout="sbmout(2)" onclick="changeListing(2); return false">Link 3</a></div>
<div id="divButton3" class="clButtons"><a href="#" onmouseover="sbmover(3)" onmouseout="sbmout(3)" onclick="changeListing(3); return false">Link 4</a></div>
<div id="divButton4" class="clButtons"><a href="#" onmouseover="sbmover(4)" onmouseout="sbmout(4)" onclick="changeListing(4); return false">Link 5</a></div>
<div id="divCircle"><img src="circle.gif" width=23 height=22 alt="" border="0"></div>

Синее - ссылка на картинку с кружочком или любую другую.

Вот сам кружочек:

Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Thomas Brattli
Категория: JavaScript's | Просмотров: 2829 | Добавил: antisept | Рейтинг: 3.0/1 |
Теги: кружок, ссылке, подлетает
Всего комментариев: 2
0  
1 7soft -Infoscript Team-  (02.08.2010 14:43) [Материал]
Аватар пользователя
Это вроде того, что у вас в форуме?

0  
2 antisept -Infoscript Team-  (02.08.2010 17:42) [Материал]
Аватар пользователя
Нет, немного другое.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]