Artikel ini menjelaskan metode menggunakan slider drag untuk mengontrol ukuran gambar. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd html 4.0 transisi // en">
<Html>
<head>
<meta http-equiv = konten-tipe konten = "text/html; charset = gb2312">
<itement> JS Drag Slider untuk mengontrol ukuran gambar </iteme>
<tyle>
*{margin: 0; padding: 0; font-size: 12px;}
.btn {lebar: 50px; tinggi: 15px; kursor: pointer;}
#picviewPanel {margin: 5 50 0 50px; Lebar: 328px; Tinggi: 248px; overflow: auto; Teks-Align: tengah; perbatasan: solid 1px #cccccc;}
#slider {margin: 0 50px; tinggi: 15px; Lebar: 328px; Border: 1px Solid #000000; Posisi: Relatif;}
#sliderleft {height: 13px; Lebar: 13px; float: kiri; perbatasan: 1px solid #cccccc; kursor: pointer;}
#sliderBlock {Height: 13px; lebar: 50px; Border: 1px solid #cccccc; Posisi: absolute; atas: 0; kiri: 113px; kursor: pointer; latar belakang: #cccccc; text-align: center;}
#sliderright {height: 13px; lebar: 13px; float: right; border: 1px solid #cccccc; kursor: pointer;}
</tyle>
</head>
<body>
<Div id = "picviewPanel"> </div>
<Div id = "Slider">
<span id = "sliderleft"> <<</span>
<span id = "sliderright" >>>> </span>
<span id = "sliderblock"> == </span>
</div>
</body>
<script>
// Golbal
var pv = null;
var sd = null;
window.onload = function () {
pv = picview baru ("/gambar/m01.jpg");
sd = slider baru (
function (p) {
document.getElementById ("SliderBlock"). InnerHtml = 2*p + "%";
PV.Expand (2*P/100);
},fungsi(){});
}
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 = ini;
o.onmousedown = function (e) {
var e = window.event || e;
_sx = O.Offsetleft;
_cx = e.clientx -_sx;
document.body.onmouseMove = pindah;
document.body.onmouseUp = up;
};
function 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);
}
function up () {
document.body.onmouseMove = function () {};
document.body.onmouseup = function () {};
}
}
</script>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.