Hvordan får jeg en Div til Skyv opp fra nederst på siden i Javascript?
En Div er et ledd en webside som opererer separat fra resten av siden. Divs ofte blir brukt som tekstbokser. Du må ta noen CSS og Javascript formatering på siden din hvis du vil at brukeren skal kunne bevege Div rundt på siden, inkludert å være i stand til å skyve den opp fra bunnen. En Div som skyves opp fra bunnen kan være gunstig fordi det tillater brukeren å holde innholdet i Div på skjermen sin til enhver tid.
Bruksanvisning
1 Logg inn på din webserver og åpne HTML-side som vil omfatte Div at du vil at brukeren skal kunne gli opp fra bunnen.
2 Klikk markøren på siden nær bunnen av HTML. Hvis du vil at Div å starte på bunnen av siden, klikk på siden rett før den avsluttende </ body> -koden.
3 Sett inn denne koden:
<Body class = "main" onMouseMove = "mouser (event);">
<Div id = "slider" class = "slideplace" onMouseDown = "mouse_down ( 'Dragger')" onMouseUp = "mouse_up ()"> Tekst går her </ div>
4 Erstatt "Text går her" med teksten du vil skal vises i Div.
5 Klikk øverst på HTML-siden, mellom <head> og </ head> taggene og inkludere denne Javascript-kode:
<Style type = "text / css">
.slideplace {
bakgrunn: # FF0000;
width: 250px;
height: 250px;
position: absolute;
top: 50 piksler;
venstre: 50 piksler;
z-index: 5;
}
</ Style>
<Script language = "javascript">
var x;
Var y;
Var element;
Var being_dragged = false;
funksjon mouser (hendelse) {
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-koord') innerhtml = x + 'px';
. Document.getElementById ( 'Y-koord') innerhtml = y + 'px';
if (being_dragged == true) {
document.getElementById (element) .style.left = x + 'px';
document.getElementById (element) .style.top = y + 'px';
}
}
funksjon mouse_down (ele_name) {
being_dragged = true;
element = ele_name;
document.getElementById (element) .style.cursor = "flytte";
}
funksjon mouse_up () {
being_dragged = false;
document.getElementById (element) .style.top = y + 'px';
document.getElementById (element) .style.left = x + 'px';
document.getElementById (element) .style.cursor = "auto";
}
</ Script>
6 Publiser siden.