滑块的变化引起图片大小的变化

分析：
首先引入一张图片，在页面中显示一个滑块，并且确定图片的大小。当触发滑块进行滑动时，要获取滑块的值，然后把图片的宽和高设置为滑块的值
实现代码：
首先引入相应的jQueryUI的类库文件
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">></script>
<link type="text/css" rel="stylesheet" href="${ pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
在ｂｏｄｙ中插入一张图片，写一个空的ｄｉｖ存放滑块
<div id="demo">
    	<div id="image">
    		<img src="${ pageContext.request.contextPath}/images/1-1-14.jpg" width="96" height="82"/>
    	</div><br/><br/><br/>
    	<div id="slider">
    		
    	</div>
</div>
在ｈｅａｄ中书写代码显示滑块
<script type="text/javascript">
		$(function(){
			$("#slider").slider({});
		});
	</script>
可以在$("#slider").slider({});中添加参数设置一下滑块的默认值，步长等，例如：
value:100,
				min: 0,
				max: 500,
			step: 50
当滑块移动时触发事件，获取滑块移动后的值，并将滑块移动后的值赋予图片
change: function( event, ui ) {
			var val=ui.value;
			//alert(val);
			$("#image img").animate({ 
		   			width:val,
		    		height:val
		  	});
}