很简单啊，先把图片用css缩小，再用js滑过的时候放大就好啦，图省事我就把js直接写在图片上了，你可以自己抽出来：
专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业岢岚免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
img src="1.jpg" width="50" height="50" onMouseOver="this.width='300'; this.height='300';" onMouseOut="this.width='50'; this.height='50'"
或者更简单的，直接用css控制，连js都不用写了：
style
#Img1{ width:50px; height:50px;}
#Img1:hover{ width:300px; height:300px;}
/style
img src="1.png" width="50" height="50" id="Img1"
HTML
HEAD
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
TITLEonMouseWheel/TITLE
SCRIPT
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta = 120)
count++;
else if (event.wheelDelta = -120)
count--;
return count;
}
function Resize(count){
oImage.style.zoom = count + '0%';
oCounter.innerText = count + '0%';
}
/SCRIPT
/HEAD
BODY
div align=center
span style="font-weight:bold"Size =
span id="oCounter" style="color:red;"100%/span/span
img id="oImage" src="images/aaa.gif" onmousewheel="return Picture();"
/div
/BODY
/HTML
简单的图片操作 用jQuery Panzoom.js 试试
需要操作比较繁杂的内容就看一下demo里面的api，目前不太兼容chrome，覆盖了js原生的touch事件
一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以jQuery插件居多，而实际上单纯实现对原图本身的放大缩小，用简单几行原生JS代码就可以做到。在今天分享的这个实例中，点击放大按钮不松鼠标，图片会不断的逐渐放大，当然也可以点一下放大一点，点击缩小按钮则反之，有需要的朋友可以考虑收藏备用哦
以下为全部代码：
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejavascript控制图片缩小或者放大/title
/head
body
script type="text/javascript"
var oTime;
function changeSize(id,action){
var obj=document.getElementById(id);
obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';
oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100);
}
document.onmouseup=function(){
window.clearTimeout(oTime);
}
/script
div style="height:350px; overflow: auto;"
img id="headImg" src="
button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);"放大/button
button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);"缩小/button
/body
/html
$(document).ready(function() { $('.post img').each(function() { var maxWidth = 100; // 图片最大宽度 var maxHeight = 100; // 图片最大高度 var ratio = 0; // 缩放比例 var width = $(this).width(); // 图片实际宽度 var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽 if(width maxWidth){ ratio = maxWidth / width; // 计算缩放比例 $(this).css("width", maxWidth); // 设定实际显示宽度 height = height * ratio; // 计算等比例缩放后的高度 $(this).css("height", height); // 设定等比例缩放后的高度 } // 检查图片是否超高 if(height maxHeight){ ratio = maxHeight / height; // 计算缩放比例 $(this).css("height", maxHeight); // 设定实际显示高度 width = width * ratio; // 计算等比例缩放后的高度 $(this).css("width", width * ratio); // 设定等比例缩放后的高度 } }); });
