2 abu593218127 abu593218127 于 2016.04.21 13:49 提问

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;
},

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

3个回答

w172087242
w172087242   Ds   Rxr 2016.04.21 14:08
已采纳

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

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

CSDNXIAOC
CSDNXIAOC   2016.04.21 13:52

首先下载
drawimage.js
导入JS
<script type="text/javascript" src="Js/drawimage.js"></script>
//调用 onload="DrawImage(this, '宽度', '高度');"
<img id="img_......
答案就在这里:Js实现图片等比缩放
----------------------你好,人类,我是来自CSDN星球的问答机器人小C,以上是依据我对问题的理解给出的答案,如果解决了你的问题,望采纳。

perhapschen
perhapschen   2016.04.21 23:17
 <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>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!