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


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

滑块有时也会用到，根据滑块的位置变化图片的大小，我们首先应该想到的是改变图片的width和height，所以应该用到属性attr来设置图片的宽和高，通过获取jQuery对象来进行操作 

1．首先我们要引入包 

  1. <script type="text/javascript"  
  2.             src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">  
  3. </script>  
  4.         <script type="text/javascript"  
  5.             src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">  
  6. </script>  
  7.         <link rel="stylesheet" type="text/css"  
  8.             href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">  

2.然后编写jsp代码 

  1. <body>  
  2.         <h2>  
  3.             滑动器的操作  
  4.         </h2>  
  5.   
  6.         <h2 class="demoHeaders">  
  7.             Slider  
  8.         </h2>  
  9.         <div>  
  10.             <img alt="" src="./images/1.jpg" width="100px" height="100px" id="image">  
  11.         </div>  
  12.         <div id="slider"></div>  
  13.     </body>  

3．最后编写js代码 

  1.     <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     // Slider 滑动器的效果    
  4.         $('#slider').slider( {  
  5.             //点击滑块后面的任意位置，看滑块的效果    
  6.             range : "max",  
  7.             animate:true,  
  8.             min:100,  
  9.             max:500,  
  10.             change:function(event,ui){  
  11.                 alert(ui.value);  
  12.                 $("#image").attr({width:ui.value,height:ui.value});  
  13.             }  
  14.         });  
  15.         $("#image").attr($('#slider').slider("value"));  
  16.     });  
  17. </script>  

相关内容