Vue-drag-resize 拖拽缩放插件的使用
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂,非常不错,具有一定的
参考借鉴价值,需要的朋友可以参考下
拖拽缩放插件的使用(简单示例
简单示例)
字幕
JS
textResize(newRect, index) {
const BoxWidth = newRect.width+''
this.texts[index].BoxWidth = BoxWidth.substring(0, BoxWidth.indexOf("."))
const BoxHeight = newRect.height+''
this.texts[index].BoxHeight = BoxHeight.substring(0, BoxHeight.indexOf("."))
const BoxTop = newRect.top+''
this.texts[index].BoxTop = BoxTop.substring(0, BoxTop.indexOf("."))
const BoxLeft = newRect.left+''
this.texts[index].BoxLeft = BoxLeft.substring(0, BoxLeft.indexOf("."))
}
logoResize(newRect, index) {
const Width = newRect.width''
this.logos[index].Width = Width.substring(0, Size.indexOf("."))
const Height = newRect.height+''
this.logos[index].Height = Height .substring(0, Size.indexOf("."))
const Top = newRect.top+''
this.logos[index].Top = Top.substring(0, Top.indexOf("."))
const Left = newRect.left+''
this.logos[index].Left = Left.substring(0, Left.indexOf("."))
}
除此之外还有字幕向左或向右滚动的CSS
.roll-left {
animation: wordsLoopLeft 6s linear infinite normal;
}
.roll-right {
animation: wordsLoopRight 6s linear infinite normal;
}
@keyframes wordsLoopLeft {
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(-40%);
-webkit-transform: translateX(-40%);
}
}
@keyframes wordsLoopRight {
0% {
transform: translateX(-40%);
-webkit-transform: translateX(-40%);
}
100% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
}
And:
自定义字体在
CSS @font-face 自定义字体
总结总结
以上所述是小编给大家介绍的Vue-drag-resize 拖拽缩放插件的使用,希望对大家有所帮助,如果大家有任何疑问请给我留
言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!