JS、JQ、FancyZoom 插件，分别实现兼容IE和火狐图片缩小放大
吴才俊
<script type="text/javascript">
//兼容IE和火狐 缩小放大、缩放
function ImageSuofang(args) {
var oImg = document.getElementById("oImg");
if (args) {
oImg.width = oImg.width * 1.1;
oImg.height = oImg.height * 1.1;
}
else {
oImg.width = oImg.width / 1.1;
oImg.height = oImg.height / 1.1;
}
}
</script>
<form id="form1">
<div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="F:\照片\表情\bf096b63f6246b60ae162428e8f81a4c510fa256.jpg" alt="pic"/>
</div>
<input id="btn1" type="button" value="放大" οnclick="ImageSuofang(true)" />
<input id="btn2" type="button" value="缩小" οnclick="ImageSuofang(false)" />
<!-- <input type="button" value="<-Rotate逆时针" name="RotateL" id="RotateL" οnclick="rotateRight('oImg',90);"> -->
</form>
通过JS实现 通讯录的照片放大 缩小
var img='<div id="photoFrame" style="width:100%; height:auto;border:0px;text-align:center"> '+"<img id='myImg' src=/webrdp-web/systemQuery.do?action=downloadAtt&fileId="+fileId+"" + "></div>";
$("#PHOTO").html(img);
var oPhoto= document.getElementById("photoFrame");
var oImg = document.getElementById("myImg");
oImg.onclick =function(){
var height= oImg.height;
if(height<=120){
oImg.width = 150;
//oImg.width = oImg.width * 2.1;
oImg.height = 220;
oPhoto.height = 220;
}
else {
oImg.width = 98;
oImg.height = 120;
oPhoto.height = 120;
}
}
通过JQ方法实现照片放大缩小
<script type="text/javascript">
$(function(){
$("#img1").click(function(){
var width = $(this).width();
if(width==100)
{
$(this).width(200);
$(this).height(300);
}
else
{
$(this).width(100);
$(this).height(150);
}
});
});
</script>
使用FancyZoom
插件
实现照片的放大缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="js-global/FancyZoom.js" language="JavaScript" type="text/javascript"></script>
<script src="js-global/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script>
</head>
<body onLoad="setupZoom();">
<a href="http://49.74.217.106:48088//webrdp-web/systemQuery.do?action=downloadAtt&fileId=53192735-08ac-44f7-9bff-0537c483303e"><img src="http://49.74.217.106:48088/webrdp-web/systemQuery.do?action=downloadAtt&fileId=53192735-08ac-44f7-9bff-0537c483303e" width="161" height="123" border="0" alt="" id="img-mwsf-9" class="photo" /></a>
放大时动作流畅，简单实用，适合在本窗口点击察看大图 <br>
<br>
<div align="center"> <br>
<br>
更多JS代码下载请访问icodeku.com <a href="http://www.icodeku.com">http://www.icodeku.com</a> </div>
</body>
<script>
</script>
</html>
插件文件如下：
类似资料：