jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化)
来源：互联网 发布：jdk 7u1 windows 7.0 编辑：程序博客网 时间：2024/05/16 05:11
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>最后的效果为: ![]()
