In diesem Artikel wird die Methode zur Verwendung von Drag Slider zur Steuerung der Größe des Bildes beschrieben. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<kopf>
<meta http-äquiv = content-type content = "text/html; charSet = gb2312">
<titels> js ziehen Slider, um die Größe des Bildes zu steuern. </title>
<Styles>
*{Margin: 0; Polsterung: 0; Schriftgröße: 12px;}
.BTN {Breite: 50px; Höhe: 15px; Cursor: Zeiger;}
#PicViewPanel {Margin: 5 50 0 50px; Breite: 328px; Höhe: 248px; Überlauf: Auto; Text-Align: Mitte; Rand: Solid 1px #ccccc;}
#Slider {Margin: 0 50px; Höhe: 15px; Breite: 328px; Rand: 1PX Solid #000000; Position: relativ;}
#SliderLeft {Höhe: 13px; Breite: 13px; float: links; Grenze: 1px fest #ccccc; Cursor: Zeiger;}
#SliderBlock {Höhe: 13px; Breite: 50px; Grenze: 1PX Solid #CCCCCC; Position: Absolute; Top: 0; links: 113px; Cursor: Zeiger; Hintergrund: #ccccc; Text-Align: Mitte;}
#Sliderright {Höhe: 13px; Breite: 13px; Float: Right; Grenze: 1PX Solid #ccccc; Cursor: Zeiger;}
</style>
</head>
<body>
<div id = "picViewPanel"> </div>
<div id = "Slider">
<span id = "SliderLeft"> <<</span>
<span id = "Slideright" >>>> </span>
<span id = "SliderBlock"> == </span>
</div>
</body>
<Script>
// Golbal
var pv = null;
var sd = null;
window.onload = function () {
pv = neuer picView ("/images/m01.jpg");
SD = neuer Schieberegler (
Funktion (p) {
document.getElementById ("SliderBlock"). Innerhtml = 2*p + "%";
pv.expand (2*p/100);
},Funktion(){});
}
var picview = function (url, Alt) {
this.url = url;
this.obj = null;
this.alt = Alt? Alt: "";
this.realwidth = null;
this.realheight = null;
this.zoom = 1;
this.init ();
}
PicView.prototype.init = function () {
var _img = document.createelement ("img");
_img.src = this.url;
_img.alt = this.alt;
_img.style.zoom = this.zoom;
document.getElementById ("picViewPanel"). appendChild (_img);
this.obj = _img;
this.realwidth = _img.offsetwidth;
this.realHeight = _img.offseteight;
}
PicView.prototype.rebind = function () {
this.obj.style.width = this.realwidth*this.zoom+"px";
this.obj.style.height = this.realHeight*this.zoom+"px";
//this.obj.style.zoom = this.zoom;
}
PicView.prototype.expand = function (n) {
this.zoom = n;
this.Rebind ();
}
var Slider = Funktion (ing, ed) {
this.block = document.getElementById ("SliderBlock");
this.percent = 0;
this.Value = 0;
this.ing = ing;
this.ed = ed;
this.init ();
}
Slider.Prototype.init = function () {
var _sx = 0;
var _cx = 0;
var o = this.block;
var me = this;
o.onmousedown = function (e) {
var e = window.event || e;
_sx = o.offsetLeft;
_cx = e.clientx-_sx;
document.body.onmousemove = Bewegung;
document.body.onmouseUp = up;
};
Funktionsbewegung (e) {
var e = window.event || e;
var pos_x = e.clientx - _cx;
pos_x = pos_x <13? 13: pos_x;
pos_x = pos_x> 248+15-50? 248+15-50: pos_x;
O.Style.Left = pos_x+"px";
me.percent = (pos_x-13)/2;
me.ing (ich.percent);
}
Funktion up () {
document.body.onmousemove = function () {};
document.body.onmouseUp = function () {};
}
}
</script>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.