Vitajte na [www.pocitac.win] Pripojiť k domovskej stránke Obľúbené stránky

Domáce Hardware Siete Programovanie Softvér Otázka Systémy

Ako Skontrolujte , či je myš nad DIV vo JavaScript

JavaScript umožňuje webovej reagovať na užívateľské udalosti , meniaci obsah stránky založené na rôznych myši a stlačenia klávesov akcií . Menu a tlačidlá často slúžia ako spúšťačmi týchto zmien , ale Divs môže byť rovnako citlivý . DIV je HTML tag , ktorý slúži ako kontajner pre ďalší obsah , ako je text a fotografie . Kurzora nad ľubovoľnú časť DIV môže vyvolať jednu zmenu . Presun na myši mimo DIV môže vyvolať ďalšie . Pokyny dovolená 1

Vložte pomocnú funkciu medzi hlavou tagov , ktoré umožňuje skriptu práce vo všetkých prehliadačoch . Funkcie pridať poslucháča udalostí do HTML prvkov na stránke . Keď to je volané , pomocná funkcia má tri parametre , alebo sady inštrukcií : . Cieľový prvok , typ udalosti a funkcie pre volanie klipart

funkcie AddEvent (obj , typ , fn ) {

if ( obj.attachEvent ) {

obj [ ' e ' + typ + fn ] = fn ;

obj [ typ + fn ] = function ( ) { obj [ ' e ' + typ + fn ] ( window.event ) ; }

obj.attachEvent ( " na " + typ , obj [ typ + fn ] ) ;

} else

obj . addEventListener ( typ , fn , false ) ;

}
2

Vytvorte funkciu medzi značkami hlavy , ktorý používa udalosť load , alebo načítanie stránky v okne , aby volania funkcia " testMouse " . To sa pripojiť dva poslucháča udalostí vašej DIV :

window.onload = testMouse ;
3

Vytvor funkcie , ktoré povedú v farbe vášho DIV zmeny na stránke na základe mouseover a mouseOut udalosti . Začnite tým , že vytvoria " testMouse " , ktorý bude mať na DIV jeho ID " testDiv . " Počúvajte na mouseover alebo mouseOut akcie a volať " addColor " alebo funkcie " removeColor " , resp . Vytvorenie " addColor " a " removeColor " funkcie , ktoré menia farbu pozadia

funkcie testMouse ( ) {

var divField = document.getElementById ( " testDiv " ) ; .
< P > AddEvent ( divField , " mouseover " , addColor ) ;

AddEvent ( divField , " mouseout " , removeColor ) ;

}

funkcie addColor ( ) {

var removeColor ( ) {

var divField = document.getElementById ( " testDiv " ) ;

divField.style.backgroundColor = " " ;

}
4

Položte DIV tagy a ukážkový text medzi značky BODY dokumentu :


Text tady texte tady texte tu . < /p >

< /div >
5

Miesto CSS štýly pre váš dIV medzi tagy hlavy , aby to pevnú veľkosť a dať mu modré pozadie :