欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue div平移

榮姿康2年前9瀏覽0評論

在Vue中實現div平移主要是通過CSS屬性transform來實現。transform可以實現元素的各種變形效果,如平移、縮放、旋轉等。下面通過一個簡單的例子來演示如何使用Vue實現div平移。

//HTML
//CSS #app { width: 100%; height: 300px; position: relative; } #app div { width: 50px; height: 50px; background: red; position: absolute; }

以上代碼定義了一個父元素和一個子元素,子元素將會在父元素中進行平移。接下來在Vue的mounted方法中使用transform屬性實現平移效果。

//JS
new Vue({
el: '#app',
mounted: function () {
var box = this.$refs.box;
setInterval(function () {
var left = Math.floor(Math.random() * (window.innerWidth - box.offsetWidth));
var top = Math.floor(Math.random() * (window.innerHeight - box.offsetHeight));
box.style.transform = 'translate(' + left + 'px, ' + top + 'px)';
}, 2000);
}
});

在mounted方法中,我們首先獲取到子元素的引用box,然后使用setInterval方法每隔兩秒隨機生成一個left和top值,將box平移相應的距離。transform屬性的translate方法接受兩個參數,分別是水平方向和垂直方向的平移距離。

以上就是使用Vue實現div平移的簡單教程,希望對大家有所幫助。