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>
