关闭

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

648人阅读 评论(0) 收藏 举报
分析:
首先引入一张图片,在页面中显示一个滑块,并且确定图片的大小。当触发滑块进行滑动时,要获取滑块的值,然后把图片的宽和高设置为滑块的值
实现代码:
首先引入相应的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"/>
在body中插入一张图片,写一个空的div存放滑块
<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>
在head中书写代码显示滑块
<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
		  	});
}

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:402540次
    • 积分:5930
    • 等级:
    • 排名:第4422名
    • 原创:210篇
    • 转载:15篇
    • 译文:0篇
    • 评论:38条
    文章分类
    最新评论