บทความนี้อธิบายวิธีการใช้ตัวเลื่อนลากเพื่อควบคุมขนาดของภาพ แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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; padding: 0; ตัวอักษรขนาด: 12px;}
.BTN {WIDTH: 50PX; ความสูง: 15PX; เคอร์เซอร์: ตัวชี้;}
#PicViewPanel {มาร์จิ้น: 5 50 0 50px; ความกว้าง: 328px; ความสูง: 248px; โอเวอร์โฟลว์: auto; text-allign: center; border: solid 1px #cccccc;}
#SLIDER {มาร์จิ้น: 0 50px; ความสูง: 15px; ความกว้าง: 328px; ชายแดน: 1px ของแข็ง #000000; ตำแหน่ง: สัมพัทธ์;}
#SliderLeft {ความสูง: 13px; ความกว้าง: 13px; Float: ซ้าย; Border: 1px Solid #CCCCCC; Cursor: Pointer;}
#SLIDERBLOCK {ความสูง: 13px; ความกว้าง: 50px; ชายแดน: 1px ของแข็ง #CCCCCCC; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 113px; เคอร์เซอร์: ตัวชี้; พื้นหลัง: #CCCCCC; text-align: center;}
#SLIDERRIGHT {ความสูง: 13px; ความกว้าง: 13px; Float: Right; Border: 1px Solid #CCCCCC; Cursor: Pointer;}
</style>
</head>
<body>
<div id = "picviewpanel"> </div>
<div id = "ตัวเลื่อน">
<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 ("/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 = ย้าย;
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);
-
ฟังก์ชั่นขึ้น () {
document.body.onmousemove = function () {};
document.body.onmouseup = function () {};
-
-
</script>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน