js css如何按比例放大视频或者图片

因需求需要做个鼠标移动则视频放大，图片放大的功能(不能贴原代码这里就讲述一下思路和重点代码段吧)，主要用到的就是一个属性，直接增加一个css的属性如下：

transform:scaleX(倍数) scaleY(倍数);  倍数可以是小数自己可以根据需求调整但是写1的话是一样大的

如果是放大镜那种效果大概实现思路就是：

1.获取到原有视频或者图片的高度和宽度

var width = $("div").css("width");

var height = $("div").css("height");

2.直接在你要展示的div中增加一个 ，大概代码如下

append(<div id='tooTip' height="+height+"  width="+width+" style="transform:scaleX(倍数) scaleY(倍数);"></div>)

 

如果想要定位展示就不能使用transform实现了，因为都是x,y轴定位的，所以可以手动直接给个height和width，我贴一下定位的代码 注意：tooTip就是新增的那个div，因为说高级点是放大实际就是增加了一个一样的div只是比原来的大一圈大一倍这样的功能

$("#tooTip").css({ position: "absolute",
        'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
        }).show("fast");
        }).mouseout(function () {
            $("#tooTip").remove();
        }).mousemove(function (e) {
            $("#tooTip").css({ position: "absolute",
            'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
        });