用HTML和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，鼠标滚轮事件
用HTML和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，说白了就是做一个像百度地图一样，鼠标放上去就一鼠标为相对坐标，滚动鼠标滚轮就可以缩放图片的...
用HTML和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，说白了就是做一个像百度地图一样，鼠标放上去就一鼠标为相对坐标，滚动鼠标滚轮就可以缩放图片的模块。可以使用以下代码：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.tup{
width:800px;
height:500px;
margin:100px auto;
border:3px;
background:red;
overflow:hidden;
zoom:300px;
}
</style>
<title>无标题文档</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
//图片按比例缩放,可输入参数设定初始大小
function resizeimg(ImgD,iwidth,iheight) {
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
ImgD.style.cursor= "pointer"; //改变鼠标指针
ImgD.onmousewheel = function img_zoom() //滚轮缩放
{
var zoom = parseInt(this.style.zoom, 0) || 100;
zoom += event.wheelDelta / 12;
if (zoom> 0) this.style.zoom = zoom + "%";
return false;
}
}
}
</SCRIPT>
</head>
<body>
<div class="tup">
<img name="" src="1.jpg" onload="javascript:resizeimg(this,198,235)">
<div>
<div id="allmap"></div>
</body>
</html>
现在这里是以浏览器左上角为参照点缩放的，我需要它以鼠标为参照点进行缩放 展开
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.tup{
width:800px;
height:500px;
margin:100px auto;
border:3px;
background:red;
overflow:hidden;
zoom:300px;
}
</style>
<title>无标题文档</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
//图片按比例缩放,可输入参数设定初始大小
function resizeimg(ImgD,iwidth,iheight) {
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
ImgD.style.cursor= "pointer"; //改变鼠标指针
ImgD.onmousewheel = function img_zoom() //滚轮缩放
{
var zoom = parseInt(this.style.zoom, 0) || 100;
zoom += event.wheelDelta / 12;
if (zoom> 0) this.style.zoom = zoom + "%";
return false;
}
}
}
</SCRIPT>
</head>
<body>
<div class="tup">
<img name="" src="1.jpg" onload="javascript:resizeimg(this,198,235)">
<div>
<div id="allmap"></div>
</body>
</html>
现在这里是以浏览器左上角为参照点缩放的，我需要它以鼠标为参照点进行缩放 展开
2个回答
展开全部
<style>
*{margin: 0;padding: 0;}
body{background: #333;}
#box{position: relative;overflow: hidden;margin: 50px auto;border: 1px solid #fff;background: #fff;}
#box img{position: absolute;}
</style>
<div id="box" style="width: 500px;height: 500px;">
<img src="你的图片地址" style="width:827px; height:262px;" alt="">
</div>
<script>
;(function() {
var d =document,on = function(b,o){
for(var a in o){
b["on"+a] = o[a];
}
};
var isRun,
startX,
startY,
endX,
endY,
rX,
rY,
bgX=0,
bgY=0,
$b = d.getElementById("box");
ww =parseInt($b.style.width),
wh =parseInt($b.style.height),
i = $b.getElementsByTagName('img')[0],
img = i.style,
imgw = parseInt(img.width),
imgh = parseInt(img.height),
scaleSize = 1;
function rs(){
var w,h;
//以完全显示图片为基准,如果改为>，则为以铺满屏幕为基准
if(ww/wh < imgw/imgh){
w = ww;
h = imgh*ww/imgw;
bgX=0;
bgY=-(h-wh)/2;
scaleSize = ww/imgw;//初始比率
}else{
w = imgw*wh/imgh;
h = wh;
bgX = -(w-ww)/2;
bgY=0;
scaleSize = wh/imgh;
}
img.width = w+"px";
img.height = h+"px";
img.left = bgX+"px";
img.top = bgY+"px";
}
rs();
/* Init */
on(d,{
"mousedown": function(e){
//按中建快速还原大小
if(e.which===2){
rs();
}
if(e.which===1 && e.target && (e.target === i)){
isRun = true;
startX = e.pageX;
startY = e.pageY;
return false;
}
},
"mouseup": function(e){
if(e.which!==1){
return;
}
img.cursor = "default";
isRun = false;
bgX = rX;
bgY = rY;
return false;
},
"mousemove": function(e){
if(e.which!==1){
return;
}
if(isRun){
img.cursor = "move";
endX = e.pageX;
endY = e.pageY;
rX = bgX+endX-startX;
rY = bgY+endY-startY;
img.left = rX+"px";
img.top = rY+"px";
}
},
"mousewheel":function(e){
//以鼠标为中心缩放，同时进行位置调整
var deltaY = 0;
var x = e.pageX;
var y = e.pageY;
e.preventDefault();
if(e.target && (e.target === i)){
x = x-$b.offsetLeft;
y = y-$b.offsetTop;
var p = -(e.deltaY)/1000;
var ns=scaleSize;
ns += p;
ns = ns<0.1 ? 0.1 :(ns > 5 ? 5 : ns);//可以缩小到0.1,放大到5倍
//计算位置，以鼠标所在位置为中心
//以每个点的x、y位置，计算其相对于图片的位置，再计算其相对放大后的图片的位置
bgX = bgX-(x-bgX)*(ns-scaleSize)/(scaleSize);
bgY = bgY-(y-bgY)*(ns-scaleSize)/(scaleSize);
scaleSize = ns;//更新倍率
img.width = imgw*ns+"px";
img.height = imgh*ns+"px";
img.top = bgY+"px";
img.left = bgX+"px";
}
}
});
})();
</script>
以前在chrome插件上以jq库为基础写过背景图的缩放平移功能，这里拿相关逻辑过来供参考，仅限于运行在chrome浏览器中
要做ie兼容的话，注意事件对象即可
追问
回答非常好，chrome下运行很好，能帮忙做一下ie兼容吗
追答
鼠标滚轮事件，没有作firefox的兼容处理~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你这段里边，出问题了？什么问题，描述一下可否？
更多追问追答
追问
这里是运行正常的，只是现在这里是以浏览器左上角为参照点缩放的，我需要它一鼠标为参照点缩放
追答
你二维坐标学得好不？如果学得好的话，你把图片使用绝对定位，然后放入xy坐标系里边计算。这段真的很好写，也很不好写，我看到数学，头疼……不过，方法大概是。你先获取鼠标相对于图片左上角的坐标，然后图片相对于浏览器内容区域左上角的坐标，然后计算缩放后的尺寸，最后图片的坐标，在这个基础上，各加上缩放值的一半，然后图片的尺寸变成新的尺寸。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
