abu593218127
abu593218127
采纳率100%
2016-04-21 05: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 little_how 5年前

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

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

    点赞 1 评论 复制链接分享
  • perhapschen cocotsau 5年前
     <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>
    
    点赞 1 评论 复制链接分享
  • CSDNXIAOC Robot-C 5年前

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

    点赞 评论 复制链接分享

为你推荐