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

原创 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
		  	});
}

iOS 图片下拉变大

前言在iOS的开发中TableView和ScrollView是可以上下滑动的,但是在下拉的过程中,顶部会出现留白的现象,于是就出现了类似于QQ空间中那样下拉顶部的图片变大的效果。看起看很高大上,其实实...
  • u010545480
  • u010545480
  • 2016年11月03日 14:06
  • 1242

android实现选中变大变小效果及边框效果的方式

一、选中变大变小效果的实现方式: 1.使用ViewCompat实现: ViewCompat是一个中介方法,主要的作用是提供兼容性。因为在android3.0前后在执行动画效果的时候,调用的api是非常...
  • hacker_crazy
  • hacker_crazy
  • 2017年11月09日 16:45
  • 166

现在有这样一个需求,我需要改变两个div的大小,一个变大,另一个就需要变小。

有一排div 吧。 然后我让第一个变大,第二个就变小。用ui的resizable方法可以实现,但是有bug。当滑动很快时有很多问题。。研究了一下午,终于在stackoverflow上找到解决方法...
  • junmoxie
  • junmoxie
  • 2014年09月22日 14:47
  • 1050

itk中的数据变大变小

变变变,图像处理的实质就是对图像的数学变换。本文简单介绍图像的变大变小,大致可以理解为就是图像的插值运算。 1.变大 在《itk中的花式数据切割(一)》中提到过,对原始数据切割后,size会变小...
  • rabbitbride
  • rabbitbride
  • 2017年05月22日 16:50
  • 198

vp+小圆点+变大变小

android广告轮播无限(自定义控件) 1, 效果图 layout_slideshow.xml 布局文件 xml version="1.0" encoding="utf-8"...
  • qq_34308476
  • qq_34308476
  • 2016年06月29日 20:02
  • 275

【Android】Gallery实现选中图片变大,两侧没选中图片变小

当你需要做一个选中图片变大,两侧图片变小的功能时,很多组件都能完成这个功能,万能的RecyclerView虽然好用,但是有个缺点,那就是android5.0以下版本的机器不兼容,你不能保证每台机器都是...
  • qq_24531461
  • qq_24531461
  • 2016年10月10日 15:10
  • 2104

【╭★使Win8屏幕上的文本变大或变小╭★】

无需更改显示器或便携式计算机屏幕的屏幕分辨率即可使文本(及其他类似图标的项目)变大。 这样,你既可以使文本易于查看,又可以让显示器或便携式计算机设置为最佳分辨率。 整理互联网和微软官方文档发布。  ...
  • u010680329
  • u010680329
  • 2013年07月29日 10:20
  • 391

Android下拉图片变大的ScrollView

1、效果图2、实现简介1、布局结构(1)、项目结构: (2)、代码结构 gitosc代码结构链接 一个主Activity,一个PullToZoomScrollView(即自定义的Scroll...
  • u010344269
  • u010344269
  • 2015年08月13日 00:13
  • 3594

关于ViewPager切换改变视图大小

对于ViewPager这个控件大家都是十分熟悉,前阵子接到了一个需求:要在viewPager滑动中改变视图大小,即可伸缩的ViewPager。起初拿到这个需求查了很多资料但都没有合适的解决办法,最后自...
  • crown_rea
  • crown_rea
  • 2016年09月09日 18:54
  • 564

iOS,由于图片原因导致tabbar图片点击发生zoom的现象

代码: [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"tab_pressed_home_icon"] withFinishe...
  • wqf_525
  • wqf_525
  • 2015年12月04日 10:44
  • 462
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:滑块的变化引起图片大小的变化
举报原因:
原因补充:

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