9. 利用滑块（slider）控件实现图片的等比例缩放。
滑块（slider）允许用户从一个有限的范围内选择一个数值，当沿着轨道移动滑块控件时，该控件将显示一个表示当前值的提示框，用户可通过设置它的属性来自定义滑块。可以使用<input>创建滑块控件，例如：
<input class=“easyui-slider" value="12" style="width:300px" data-options="showTip:true, rule:[0, '|', 25, '|', 50, '|', 75, '|', 100]" >
上面使用<input>方法在CSS中设置滑块的绝对位置是无效的。也可以通过<div> 创建滑块，但是这时value属性是无效的。这里我们通过<input>创建滑块，在滑块外添加一个层<div>，用来设置滑块的绝对坐标位置。
图2-7. 利用滑块控件实现图片等比例缩放程序运行界面
本例在表单中定义一个HTML图片控件（image1），学生学号为一个组合框（combobox），每个学生对应一个图片文件，其文件名为姓名拼音与png文件的组合（如jiabaoyu.jpg）。当用户在组合框中选定某个学生时，触发组合框的onSelect事件，这时image1控件中即时显示该学生对应的图片文件。滑块用于调整图片的大小，图片可以最大放大至100%。resizeImage()函数根据图片原始大小，等比例计算图片缩放后的宽度和高度，保证图片大小变化过程中不被扭曲。本实例程序运行界面图2-7所示，其主要程序实现方法与过程如下。
①定义表单myForm1，在表单中添加多个控件，其中包括学号对应的组合框数据源数组studentsource及组合框控件stuid。
var studentsource=[
{"stuid":"D2014540101","stuname":"贾宝玉","pycode":"jiabaoyu","gender":"男",
"birthdate":"1996-02-10", "place":"浙江省杭州市"},
{"stuid":"D2014540102","stuname":"林黛玉","pycode":"lindaiyu","gender":"女",
"birthdate":"1996-07-15", "place":"浙江省温州市"},
{"stuid":"D2014540103","stuname":"薛宝钗","pycode":"xuebaocha","gender":"女",
"birthdate":"1995-12-20", "place":"浙江省绍兴市"}
];
myForm('myForm1','main','学生信息',0,0,315,520,'');
myFieldset('myFieldset1','myForm1','基本信息',10,10,240,255);
myLabelField('stuid','myFieldset1','学号：',36*0+25,12,0,0);
myTextField('stuname','myFieldset1','姓名：',70,36*1+20,12,0,160);
myTextField('pycode','myFieldset1','汉语拼音：',70,36*2+20,12,0,160,'');
myDateField('birthdate','myFieldset1','出生日期：',70,36*3+20,12,0,120,'1997-2-17');
myComboField('gender','myFieldset1','性别：',70,36*4+20,12,0,120,'男;女','');
myTextField('place','myFieldset1','出生地：',70,36*5+20,12,0,120,8,2,'60.25','10','100');
//定义学生编码对应的组合框
$("#myFieldset1").append('<div style="position: absolute; top:22px; left:82px; width: 100px;
padding-left: 4px;" id="stuid_div"><input class=“easyui-combobox" id="stuid"
style="padding:0px 6px 0px 6px" /></div>');
$("#stuid").combobox({
width:160,
panelHeight: 'auto',
editable: false,
data: studentsource,
valueField: 'stuid',
textField: 'stuid'
});
②在表单中定义学生照片图片控件image1和滑块控件slider1，并设置图片的src（文件路径和名称）值为空，即先暂时不显示图片。
var str='<img id="image1" src=" " style="position: absolute; top:18px; left:285px;"></img>';
str+='<div style="position: absolute; top:230px; left:290px; width:200px;">';
str+='<input id="slider1" class=“easyui-slider" value="0" ></div>';
$("#myForm1").append($(str));
//定义slider控件
$("#slider1").slider({
showTip: true,
min:1, max:100,
rule: [0,'|',25,'|',50,'|',75,'|',100],
tipFormatter: function(value){
return value;
},
});
③编写滑块控件的onChange事件，即当滑块在轨道上移动时，触发该事件，调用函数resizeImage()，将滑块当前值value传给函数，以改变学生照片的大小，对图片进行等比例缩放。
$("#slider1").slider({
onChange: function(value){
var src=$("#image1").attr("src");
resizeImage('image1',src,value);
}
});
④编写学生组合框的onSelect事件，即当组合框中选定某个学生时，从数组studentsource中提取全部数据，将该学生的姓名、拼音、性别、出生日期等信息赋值到表单对应的控件中去；同时将图形控件中的src设置为该学生学号对应的图形文件名，并调用函数重新显示图片。
$("#stuid").combobox({
onSelect: function(record) { //定义选中事件
if (record){
$("#stuname").textbox("setValue",record.stuname);
$("#pycode").textbox("setValue",record.pycode);
$("#gender").textbox("setValue",record.gender);
$("#birthdate").textbox("setValue",record.birthdate);
$("#place").textbox("setValue",record.place);
$("#slider1").slider('setValue',30);
var src="system/images/"+record.stuid+".jpg";
$("#image1").attr('src',src);
resizeImage('image1',src);
}
}
});
⑤设置组合框的初值为第一个学生，滑块的初值为30。这时由于滑块值发生变化，其onChange事件被触发；同时由于组合框选择了一个学生，其onSelect事件也被触发。
$("#slider1").slider('setValue',30);
$('#stuid').combobox('select',studentsource[0].stuid);
⑥编写图片缩放程序。在图片的onload事件中编写程序，先计算出图片的大小尺寸，即图片的高度和宽度；然后根据滑块值，按百分比等比例缩放图片的高度和宽度。
function resizeImage(img,src){
var image=new Image();
image.src=src;
ratio=$("#slider1").val()/100.0;
image.onload=function() { //必须放在onload事件中
var aheight=image.height;
var awidth=image.width;
if (ratio!=0){ //调整图片大小,按比例缩放
awidth = awidth * ratio;
aheight = aheight * ratio;
$("#image1").css({width: awidth, height: aheight});
}
}
}