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

原创 2012年03月27日 23:44:17
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>

最后的效果为:
 


相关文章推荐

CSS,Jquery精美进度条和滑动条(滑块)插件

  • cometwo
  • cometwo
  • 2016年03月15日 21:46
  • 4635

jquery插件系列之 - Slider滑块

概述     滑动条是一种简单的设置一定范围内参数的插件。     官方示例地址:http://jqueryui.com/demos/slider/             ·参数(参数名 ...

最佳6款用于移动网站开发的 jQuery 图片滑块插件

随着智能手机的普及,越来越多的用户喜欢通过手机中浏览网页。今天这篇文章为大家推荐最佳6款用于移动应用的 jQuery 图片滑块插件,这些插件很好的处理了触屏事件,效果平滑,帮助你构建用户体验良好的...
  • Tizian
  • Tizian
  • 2012年07月18日 10:17
  • 379

用jquery插件-slider实现滑块的效果

滑块的效果

适用于多种设备的的滑块幻灯片插件--jquery插件Swiper

今天为大家推荐一款支持多种设备(移动端,平板,pc端)的滑块幻灯片插。我测试的是ie7. 下载后解压: aa...

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

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

25个非常棒的jQuery滑块插件和教程

图像滑块和幻灯片效果,已成为网页设计的基本要素。它们以有趣的方式展示视觉内容。如果你一直想知道这是如何实现的,那么这里的25个非常棒的 jQuery 图片滑块制作教程将帮助您实现这种效果。 1.Cr...

滑块: 基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js

一、插件介绍 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化)
举报原因:
原因补充:

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