您的位置：首页 > Web前端 > JavaScript

jslider(拖动条)图片放大缩小功能（2012.4.03）

2013-04-03 17:05 441 查看

<%--
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图片放大缩小功能

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片放大缩小 jslider

相关文章推荐

新的分享

章节导航