图片放大缩小效果
效果在附件里，麻烦下载来看吧
<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="http://ajax.googleapis.com/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>
773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
