今天写项目的时候碰到一个修改div缩放的问题,因为并不是直接给定一个固定大小的缩放比例,所以总结一下怎么使用JS控制动态缩放。
给定一个div:
<div id="box"></div>
<!-- 初始样式 -->
<style type="text/css">
*{padding: 0;margin: 0;list-style: none;}
#box{width: 200px;height: 200px;background: pink;}
</style>
<script type="text/javascript">
var Scale = document.getElementById("box");
var lxl = 2; //这里为了达到效果,给变量设定了一个默认值,而没有对变量进行操作。
Scale.style.transform = "scale("+ lxl +")"; //scale()在这里要使用拼接的方式才能生效。
</script>
这样就可以使用JS来控制缩放属性了,我们可以对lxl这个变量进行操作,从而达到动态的一个效果。
此外可以使用ES6的模板字符串来实现:
<script>
let box = document.getElementById('box')
let ScaleNum = 2
box.style.transform = `scale(${ScaleNum})`
</script>
同样能达到缩放的效果。
巴拉巴拉: