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>
最后的效果为:
jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化)
最新推荐文章于 2022-08-29 07:29:28 发布