图片放大缩小效果
效果在附件里,麻烦下载来看吧
<html><head><title>Simple jsp page</title><link type="text/css" href="js/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" /><script type="text/javascript" src="/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript" src="js/jquery.mousewheel.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script><script type="text/javascript">$(document).ready(function(){var img=$("img");img.draggable()var slider = $( "<div id='slider'></div>" ).insertBefore( "#big" ).slider({min: img.height(),max: 800,range: "min",value: 1,slide: function( event, ui ) {// alert(ui.value)resizeImg("img",ui.value)//select[ 0 ].selectedIndex = ui.value - 1;},change:function(event, ui){resizeImg("img",ui.value)}});$('#big').bind('mousewheel', function(event, delta){var i=img.height();if(delta>0){//alert(i)i=i+10;slider.slider( "value", i );}else{i=i-10;slider.slider( "value", i );}});function resizeImg(node,value){$(node).height(value);}})</script></head><body><div id="big" style="height:500px;overflow: hidden;width: 500px"><img src="tupian.jpg" style="cursor: move"/></div></body></html>