滑块的应用(移动滑块使图片变化)

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>  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://127.0.0.1/wyypzx.html