vue

最新推荐文章于 2023-02-27 21:05:53 发布

weixin_45581406

最新推荐文章于 2023-02-27 21:05:53 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_45581406/article/details/102898254

版权

以下是关于vue的几个案例接供参考：
图片拖动效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义指令</title>
  <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="./velocity.js"></script>
    <style type="text/css">
       .box{
            width: 800px;
            height: 800px;
            position: relative;
            background-color: #000000;
            margin: auto;
        }
        .img{
            width: 200px;
            position: absolute;
            left:0;
            top:0;
            transform: rotateZ(0deg);
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="box">
            <img src="img/01.jpg" class="img" v-ball>
            <img src="img/02.jpg" class="img" v-ball>
            <img src="img/03.jpg" class="img" v-ball>
            <img src="img/04.jpg" class="img" v-ball>
        </div>
    </div>
    <script type="text/javascript">
        /* 1、注册 */
        Vue.directive('ball',{
            inserted:function(el){
                var i=0;
                el.onclick=function(e){
                    i+=10;
                    el.style.transform="rotateZ("+i+"deg)"
                };
                el.onmousedown=function(e){
                    var l=e.clientX-el.offsetLeft;
                    var t=e.clientY-el.offsetTop;
                    document.onmousemove=function(e){
                        el.style.left=(e.clientX-l)+'px';
                        el.style.top=(e.clientY-t)+'px'
                    };
                    el.onmouseup=function(){
                        document.onmousemove=null;
                        el.onmouseup=null;
                    }
                }
            }
        });
        var root = new Vue({
            el:'#root'
        })
    </script>
</body>
</html>

自定义变色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8&

最低0.47元/天解锁文章

weixin_45581406

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue

以下是关于vue的几个案例接供参考：图片拖动效果：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>自定义指令</title> <script src="js/vue-2.6.9.min.js" type="text...
复制链接

扫一扫

vue

“相关推荐”对你有帮助么？