The slider changes the image size.

Analysis: first introduce an image, display a slider on the page, and determine the image size. When the slider is triggered to slide, you need to get the slider value, and then set the width and height of the image to the slider value implementation code: first introduce the corresponding jqueryui class library file <SCRIPT type = "text/JavaScript" src = "$ {pagecontext. request. contextpath}/JavaScript/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 type =" text/CSS "rel =" stylesheet "href =" $ {pagecontext. request. contextpath}/CSS/UI-lightness/jquery-ui-1.8.18.custom.css "/> insert an image in the body, write an empty Div to store the slider <Div id = "Demo"> <Div id = "image">  </div> <br/> <Div id =" slider "> </div> show the slider when writing code in the head <SCRIPT type =" text/JavaScript "> $ (function () {$ ("# Slider "). slider ({}) ;}); </SCRIPT> can be found at $ ("# Slider "). in slider ({});, add parameters to set the default value and step of the slider, for example, value: 100, Min: 0, Max: 500, step: 50 triggered when the slider moves, get the value after the slider moves, and assign the value after the slider moves to the image change: function (event, UI) {var val = UI. value; // alert (VAL); $ ("# image IMG "). animate ({width: Val, height: Val });}