1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue旋转图片功能 旋转放大图片功能;vue旋转放大div元素

vue旋转图片功能 旋转放大图片功能;vue旋转放大div元素

时间:2024-04-18 00:46:30

相关推荐

vue旋转图片功能 旋转放大图片功能;vue旋转放大div元素

需求:可以旋转、放大、颠倒图片。

html:

<div class="imgtop"><img class="imgboxele" id="xingshizhengzhengben" :src="imgurl" alt=""></div><div class="imgtxt">行驶证正本</div><span @click="chongzhi('xingshizhengzhengben')"><i class="el-icon-refresh"></i>//重置</span><span @click="xuanzhuan('xingshizhengzhengben')"><i class="el-icon-refresh-right"></i>//旋转</span><span @click="zuoyou('xingshizhengzhengben')"><i class="el-icon-right"></i>//右翻转</span><span @click="shangxia('xingshizhengzhengben')"><i class="el-icon-top"></i>//左翻转</span>

data:

xuanzhuanNumCar: 0,imgurl:'',//图片的地址

js

chongzhi(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateZ(' + 0 + 'deg)';box.style.transform = 'rotateX(' + 0 + 'deg)';box.style.transform = 'rotateY(' + 0 + 'deg)';},xuanzhuan(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateZ(' + 90 * this.xuanzhuanNumCar + 'deg)';},zuoyou(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateY(' + 180 * this.xuanzhuanNumCar + 'deg)';},shangxia(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateX(' + 180 * this.xuanzhuanNumCar + 'deg)';},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。