Cet article décrit la méthode d'utilisation du curseur de drag pour contrôler la taille de l'image. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd html 4.0 transitional // en">
<html>
<adal>
<meta http-equiv = contenu-type contenu = "text / html; charset = gb2312">
<Title> JS Drag Slider pour contrôler la taille de l'image </TITME>
<style>
* {marge: 0; rembourrage: 0; taille de police: 12px;}
.btn {largeur: 50px; hauteur: 15px; curseur: pointeur;}
#PicViewPanel {marge: 5 50 0 50px; Largeur: 328px; Hauteur: 248px; débordement: auto; Text-Align: Centre; bordure: solide 1px #cccccc;}
#slider {marge: 0 50px; hauteur: 15px; largeur: 328px; bordure: 1px solide # 000000; position: relative;}
#sliderleft {hauteur: 13px; Largeur: 13px; float: gauche; bordure: 1px solide #cccccc; curseur: pointeur;}
#sliderBlock {hauteur: 13px; largeur: 50px; bordure: 1px solide #cccccc; position: absolu; en haut: 0; gauche: 113px; curseur: pointeur; arrière-plan: #cccccc; text-align: central;}
#sliderrright {hauteur: 13px; largeur: 13px; float: à droite; bordure: 1px solide #cccccc; curseur: pointeur;}
</ style>
</ head>
<body>
<div id = "picViewPanel"> </div>
<div id = "Slider">
<span id = "Sliderleft"> <<<< / span>
<span id = "sliderright" >>>> </ span>
<span id = "Sliderblock"> == </span>
</div>
</docy>
<cript>
// golbal
var pv = null;
var sd = null;
window.onload = function () {
pv = new picView ("/ images / m01.jpg");
SD = nouveau curseur (
fonction (p) {
document.getElementById ("SliderBlock"). InnerHtml = 2 * P + "%";
pv.Expand (2 * p / 100);
},fonction(){});
}
var picView = fonction (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.offsetheight;
}
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 = fonction (n) {
this.zoom = n;
this.rebind ();
}
var Slider = fonction (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 = ceci;
o.onmousedown = fonction (e) {
var e = window.event || e;
_sx = o.offsetLeft;
_cx = e.clientx-_sx;
document.body.onmousemove = move;
document.body.onmouseup = up;
};
Fonction Move (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 (me.percent);
}
fonction up () {
document.body.onmousemove = function () {};
document.body.onmouseup = function () {};
}
}
</cript>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.