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

原创 2012年03月28日 19:27:30
分析:
首先引入一张图片,在页面中显示一个滑块,并且确定图片的大小。当触发滑块进行滑动时,要获取滑块的值,然后把图片的宽和高设置为滑块的值
实现代码:
首先引入相应的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
		  	});
}

相关文章推荐

【转】c# 图片压缩 (非图片大小变化)----使得显示效果差点,但是图片占用空间需要变小

转自:http://bbs.csdn.net/topics/270043488 c# 图片压缩 (非图片大小变化)----使得显示效果差点,但是图片占用空间需要变小。 [问题点数:6...

VC++ 滑块移动时,图片变化。

  • 2013年06月18日 11:40
  • 30.36MB
  • 下载

jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化)

jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化) 滑块有时也会用到,根据滑块的位置变化图片的大小,我们首先应该想到的是改变图片的width和height,所以应该用到属性attr来设...

js 自定义滑块 实现文字滚动+透明度变化

js文字滚动+透明度 #parent { margin: 0 auto; width: 600px; ...

PHP图片大小裁剪imagecopy、缩放imagecopyresampled函数

图片裁剪、缩放函数有很多,但是我推荐这两个.有点小修改. //图片裁剪、缩放函数 1. //$filepath图片路径,$percent缩放百分比 function imagepress($filep...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:滑块的变化引起图片大小的变化
举报原因:
原因补充:

(最多只允许输入30个字)