JQuery开发之九————利用滑块（slider）控件实现图片的等比例缩放。

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":"林黛玉