JaveScript之CSS变量

大概是CSS3吧,出了一个叫CSS变量的东西，也叫自定义属性，还是比较有用的东东，可以用JavaScript灵活控制，变量作用

我们来实现一个div跟随鼠标滚动的小东西用来说明如何自定义变量

:root{//全局变量

              --mouse-x: 0px;

              --mouse-y: 0px;

        }

        .mover{

              width: 100px;

              height: 100px;

              background:lightblue;

        }

HTML代码如下：

<div class="mover"></div>

JavaScript代码，我们来写一段监听，处理变量值

            let root = document.documentElement

                root.addEventListener('mousemove', e => {

                root.style.setProperty('--mouse-x', e.clientX + 'px')

                root.style.setProperty('--mouse-y', e.clientY + 'px')

          })

这样就实现了我们想要的效果，当然啦，如果用JQ可能更简便些。

$(document).mousemove(function(e){

            $('.mover').css({"margin-top":e.clientY+"px","margin-left":e.clientX+"px"}).text(e.clientX+","+e.clientY);

            //

        })

实现效果如下：

巴特西

JaveScript之CSS变量

最新文章

热门文章