Un Div è una sottosezione di una pagina Web che opera separatamente dal resto della pagina. Divs vengono spesso utilizzati come caselle di testo. È necessario includere alcuni CSS e JavaScript formattazione sulla tua pagina se si desidera che l'utente sia in grado di spostare il Div intorno alla pagina, tra cui essere in grado di scivolare verso l'alto dalla parte inferiore. Un Div che scivola fino dal basso può essere vantaggioso perché permette all'utente di mantenere il contenuto in Div sul suo schermo in ogni momento.

Istruzioni

1

Accedere al server Web e aprire la pagina HTML che include il Div che si desidera che l'utente sia in grado di scorrere verso l'alto dalla parte inferiore.

2

Clicca il cursore nella pagina nella parte inferiore del codice HTML. Se si desidera che il tag Div per iniziare nella parte inferiore della pagina, fare clic sulla pagina appena prima della chiusura < / body > tag.

3

Inserisci questo codice:

< corpo class = "principale" onMouseMove="mouser(event);" >

< div id = "slider" class = "slideplace" onMouseDown="mouse_down('dragger')" onMouseUp="mouse_up()" > testo va qui < / div >

4

Sostituire "Testo va qui" con il testo che si desidera venga visualizzato in div.

5

Fare clic su nella parte superiore della tua pagina HTML, tra il < head > e < / head > Tag e includere questo codice JavaScript:

< style type = "text/css" >

.slideplace () {

Priorità bassa: #FF0000;

Larghezza: 250px;

Altezza: 250px;

Posizione: assoluta;

Top: 50px;

sinistra: 50px;

z-indice: 5;

}

< / stile >

< script language = "javascript" >

var x;

var y;

elemento di var;

var being_dragged = false;

Function mouser(event) () {

if(Event.OffsetX || Event.OffsetY) () {

x=Event.OffsetX;

y=Event.OffsetY;

}

else {

x=Event.pageX;

y=Event.pageY;

}

document.getElementById('X').innerHTML = x + 'px';

document.getElementById('Y').innerHTML = y + 'px';

document.getElementById('X-coord').innerHTML = x + 'px';

document.getElementById('Y-coord').innerHTML = y + 'px';

if(being_dragged == true) () {

Document. getElementById (elemento).style.left = x + 'px';

Document. getElementById (elemento).style.top = y + 'px';

}

}

Function mouse_down(ele_name) () {

being_dragged = true;

elemento = ele_name;

Document. getElementById (elemento).style.cursor = 'Sposta';

}

Function mouse_up() () {

being_dragged = false;

Document. getElementById (elemento).style.top = y + 'px';

Document. getElementById (elemento).style.left = x + 'px';

Document. getElementById (elemento).style.cursor = 'auto';

}

< / script >

6

Pubblicare la pagina.