奈寻味导航网 » 文章资讯 » Vue-drag-resize 拖拽缩放插件的使用(简单示例)

Vue-drag-resize 拖拽缩放插件的使用(简单示例)

2023-08-05 00:49:04 168

字幕

logo

textResize(newRect,index){
constBoxWidth=newRect.width+''
this.texts[index].BoxWidth=BoxWidth.substring(0,BoxWidth.indexOf("."))

constBoxHeight=newRect.height+''
this.texts[index].BoxHeight=BoxHeight.substring(0,BoxHeight.indexOf("."))

constBoxTop=newRect.top+''
this.texts[index].BoxTop=BoxTop.substring(0,BoxTop.indexOf("."))

constBoxLeft=newRect.left+''
this.texts[index].BoxLeft=BoxLeft.substring(0,BoxLeft.indexOf("."))
}

logoResize(newRect,index){
constWidth=newRect.width''
this.logos[index].Width=Width.substring(0,Size.indexOf("."))

constHeight=newRect.height+''
this.logos[index].Height=Height.substring(0,Size.indexOf("."))

constTop=newRect.top+''
this.logos[index].Top=Top.substring(0,Top.indexOf("."))

constLeft=newRect.left+''
this.logos[index].Left=Left.substring(0,Left.indexOf("."))
}

除此之外还有字幕向左或向右滚动的CSS

.roll-left{
animation:wordsLoopLeft6slinearinfinitenormal;
}

.roll-right{
animation:wordsLoopRight6slinearinfinitenormal;
}

@keyframeswordsLoopLeft{
0%{
transform:translateX(100%);
-webkit-transform:translateX(100%);
}
100%{
transform:translateX(-40%);
-webkit-transform:translateX(-40%);
}
}

@keyframeswordsLoopRight{
0%{
transform:translateX(-40%);
-webkit-transform:translateX(-40%);
}
100%{
transform:translateX(100%);
-webkit-transform:translateX(100%);
}
}

And：

自定义字体在

CSS@font-face自定义字体

总结

以上所述是小编给大家介绍的Vue-drag-resize拖拽缩放插件的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue-drag-resize 拖拽缩放插件的使用(简单示例)

热门推荐

随机推荐