问题描述

js 实现图片的定点缩放

我想实现以图片的中心为原点进行定点缩放，
我写的：
toBig : function(id){
var img = document.getElementById(id);
var height = img.height;
var width = img.width;
img.height = height*1.5;
img.width = width*1.5;
},

    这个默认是从图片的左上角开始进行缩放

解决方案

缩放的同时动态指定
position为absolute和relative时:left和top
position未指定时为:margin-left和margin-top

只要坚持中心点不变就可以了

解决方案二：

首先下载
drawimage.js
导入JS
<script type="text/javascript" src="Js/drawimage.js"></script>
//调用 onload="DrawImage(this, '宽度', '高度');"
<img id="img_......
答案就在这里：Js实现图片等比缩放

解决方案三：

 <input id='btn1' value='变宽' onclick="toBig('div1',1.5)" type='button' />
<div style='width:400px; margin:100px auto; text-align:center; position:relative;'>

    <div id='div1' style='height:100px; width:100px; background:red; position:absolute;'></div>
</div>

<script type='text/javascript'>

var toBig = function(id,times){
    var img = document.getElementById(id),
    height = img.offsetHeight
    width = img.offsetWidth;

    img.style.height = height*times+'px';
    img.style.width = width*times+'px';
    img.style.top = img.offsetTop-height*((times-1)/2)+'px';
    img.style.left = img.offsetLeft-width*((times-1)/2)+'px';
}

</script>