この記事では、ドラッグスライダーを使用して画像のサイズを制御する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードを次のようにコピーします：<！Doctype HTML public " - // w3c // dtd html 4.0 transitional // en">
<html>
<head>
<Meta http-equiv = content-type content = "text/html; charset = gb2312">
<title> jsドラッグスライダーは、画像のサイズを制御します</title>
<style>
*{マージン：0;パディング：0; font-size：12px;}
.btn {width：50px; height：15px; cursor：pointer;}
#picviewpanel {マージン：5 50 0 50px;幅：328px;高さ：248px;オーバーフロー：自動;テキストアリグイン：センター;ボーダー：ソリッド1px #cccccc;}
#slider {マージン：0 50px;高さ：15px;幅：328px;境界線：1pxソリッド＃000000;位置：相対;}
#sliderleft {height：13px;幅：13px; float：左;境界線：1px solid #cccccc; cursor：pointer;}
#sliderblock {height：13px; width：50px; border：1px solid #cccccc; position：absolute; top：0; left：113px; cursor：pointer; background：#ccccc; text-align：center;}
#sliderright {height：13px; width：13px; float：right; border：1px solid #cccccc; cursor：pointer;}
</style>
</head>
<body>
<div id = "picviewpanel"> </div>
<div id = "slider">
<span id = "sliderleft"> <<</span>
<span id = "sliderright" >>>> </span>
<span id = "sliderblock"> == </span>
</div>
</body>
<スクリプト>
//ゴルバル
var pv = null;
var sd = null;
window.onload = function（）{
pv = new picview（ "/images/m01.jpg"）;
SD =新しいスライダー（
関数（p）{
document.getElementById（ "SliderBlock"）。innerhtml = 2*p + "％";
pv.expand（2*p/100）;
}、関数（）{}）;
}
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.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 = function（n）{
this.zoom = n;
this.rebind（）;
}
var slider = function（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 = move;
document.body.onmouseup = up;
};
関数移動（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）;
}
function up（）{
document.body.onmousemove = function（）{};
document.body.onmouseup = function（）{};
}
}
</script>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。