jslider(拖动条)图片放大缩小功能（2012.4.03）
<%-- Document : showFigure Created on : Apr 2, 2013, 5:14:14 PM Author : sunny--%><%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="auther" content="f7" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"> <style type="text/css"> #slider { margin: 20px 10pt 30pt 40px; width: 200px } #inputSytle { position:absolute; height: 15px; width: 400px; left: 300px; top: 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #styleImage{ margin: 10px 10pt 30pt 40px; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <title>View Figure</title> <% String imgName = request.getParameter("fileName"); %> <script type="text/javascript"> var PhotoSize = { cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录 init: function(){ this.elem = document.getElementById("focusphoto"); this.photoWidth = this.elem.scrollWidth; this.photoHeight = this.elem.scrollHeight; this.cpu = 1; }, action: function(x){ this.cpu = x; this.elem.style.width = this.photoWidth * this.cpu +"px"; this.elem.style.height = this.photoHeight * this.cpu +"px"; } }; window.onload = function(){PhotoSize.init()}; </script> </head> <body> <div id="slider" src=""> <img src="jslib/scaler_slider_track.gif"> </div> <div id="inputSytle"> <input id="zoomVal" type="text" size="5" value="100"> % <input type="button" value="Start to Zoom" id="up" /> <input type="button" value="Default Figure" id="default"/> </div> <div id="styleImage"> <img id="focusphoto" src="http://files.jb51.net/upload/201107/20110713233007487.jpg" /> </div> <script> $( "#slider" ).slider( { axis:'horizontal', min: 0, max:200, step:2, value:100 } ); var max = $( "#slider" ).slider( "option", "max" ); var numb = 0; $( "#slider" ).on( "slide", function( event, ui ) { var value = $( "#slider" ).slider( "option", "value" ); $("#zoomVal").val(value); if(value>numb){ PhotoSize.action(value/100.0); }else{ PhotoSize.action(value/100.0); } numb = value; } ); $( function(){ $("#up").click(function(){ var value = $("#zoomVal").val(); PhotoSize.action(value/100.0); }); $("#default").click(function(){ $("#zoomVal").val('100'); PhotoSize.action(1); }); } ); </script> </body> </html>功能描述：jquery实现jslider图片放大缩小功能