关闭

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

972人阅读 评论(0) 收藏 举报
jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化)
滑块有时也会用到,根据滑块的位置变化图片的大小,我们首先应该想到的是改变图片的width和height,所以应该用到属性attr来设置图片的宽和高,通过获取jQuery对象来进行操作
1.首先我们要引入包
<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 rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
2.然后编写jsp代码
<body>
		<h2>
			滑动器的操作
		</h2>

		<h2 class="demoHeaders">
			Slider
		</h2>
		<div>
			<img alt="" src="./images/1.jpg" width="100px" height="100px" id="image">
		</div>
		<div id="slider"></div>
	</body>
3.最后编写js代码
	<script type="text/javascript">
$(document).ready(function() {
	// Slider 滑动器的效果 
		$('#slider').slider( {
			//点击滑块后面的任意位置,看滑块的效果 
			range : "max",
			animate:true,
			min:100,
			max:500,
			change:function(event,ui){
				alert(ui.value);
				$("#image").attr({width:ui.value,height:ui.value});
			}
		});
		$("#image").attr($('#slider').slider("value"));
	});
</script>

最后的效果为:
 


0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:281267次
    • 积分:5116
    • 等级:
    • 排名:第5386名
    • 原创:221篇
    • 转载:18篇
    • 译文:0篇
    • 评论:148条
    文章分类