تصف هذه المقالة طريقة استخدام Slider Slider للتحكم في حجم الصورة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<head>
<meta http-equiv = content-type content = "text/html ؛ charset = gb2312">
<title> js drag slider للتحكم في حجم الصورة </title>
<style>
*{margin: 0 ؛ padding: 0 ؛ font-size: 12px ؛}
.btn {العرض: 50px ؛ الارتفاع: 15px ؛ المؤشر: مؤشر ؛}
#PICViewPanel {margin: 5 50 0 50px ؛ العرض: 328 بكسل ؛ الارتفاع: 248 بكسل ؛ تجاوز: تلقائي ؛ محاذاة النص: الوسط ؛ الحدود: الصلبة 1px #CCCCCC ؛}
#slider {margin: 0 50px ؛ الارتفاع: 15px ؛ العرض: 328px ؛ الحدود: 1px الصلبة #000000 ؛ الموضع: النسبية ؛}
#sliderleft {الارتفاع: 13px ؛ العرض: 13px ؛ تعويم: اليسار ؛ الحدود: 1 بكسل Solid #CCCCCC ؛ المؤشر: مؤشر ؛}
#sliderblock {الارتفاع: 13px ؛ العرض: 50px ؛ الحدود: 1px الصلبة #cccccc ؛ الموضع: المطلق ؛ الأعلى: 0 ؛ اليسار: 113px ؛ المؤشر: مؤشر ؛ الخلفية: #cccccc ؛ text-align: center ؛}
#sliderright {الارتفاع: 13px ؛ العرض: 13px ؛ تعويم: يمين ؛ الحدود: 1px الصلبة #cccccc ؛ المؤسس: مؤشر ؛}
</style>
</head>
<body>
<div id = "picviewpanel"> </viv>
<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 = New PicView ("/Images/M01.jpg") ؛
SD = شريط التمرير الجديد (
وظيفة (ع) {
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.ed = ed ؛
this.init () ؛
}
slider.prototype.init = function () {
var _sx = 0 ؛
var _cx = 0 ؛
var o = this.block ؛
var me = هذا ؛
O.Onmousedown = function (e) {
var e = window.event || e ؛
_sx = o.offSetLeft ؛
_cx = e.clientx-_sx ؛
document.body.onmousemove = move ؛
document.body.onmouseup = up ؛
} ؛
وظيفة الحركة (هـ) {
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) ؛
}
وظيفة UP () {
document.body.onmousemove = function () {} ؛
document.body.onmouseup = function () {} ؛
}
}
</script>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.