首页 > Web开发 > 详细

JaveScript之CSS变量

时间:2018-09-30 16:18:23      阅读:153      评论:0      收藏:0      [点我收藏+]

大概是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变量

原文:https://www.cnblogs.com/fengju8899/p/9729551.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!