dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散、嵌套在 js 中的修改样式的代码剥离出来。比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化而触发一些效果,原本你要写 js 去绑定滚动事件,然后计算偏移量,然后更新元素 css,使用 dynamic-css,你只要根据语法去写好 css 表达式就可以了。对于一些原本需要复杂的 js 判断的动态 css,用 dynamic css 表达式几行代码搞定。

 

举两个例子:

元素跟随鼠标移动

<span>dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来</span>

实现它的源代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>元素跟随鼠标移动 - DynamicCss Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="jquery.js"></script>
    <script src="avalon.shim.js"></script>
    <script src="avalon.dynamiccss.js"></script>
    <script src="layout.js"></script>
</head>
<body>
    <style type="text/dynamiccss" ms-controller="layout" ms-dynamiccss>
/* 这里的 CSS 不是静态的,其值会随绑定变量的更新而更新,从而实现一个动态的 style */
.mouse-follow { position: absolute;
/* layout.mouse.pageY 和 layout.mouse.pageX 是预先设定好的对象,其值会随鼠标的移动而更新,值更新时 CSS 随之对应更新。你也可以自定义绑定的对象 */
top:{{layout.mouse.pageY}}px; left:{{layout.mouse.pageX}}px; } </style>
<div class="mouse-follow">为什么追我</div> </body> </html>

页面滚动到一定距离时,元素发生变化

<span>dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来</span>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>页面滚动到一定距离时,元素发生变 - DynamicCss Demo化</title>
    <meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery.js"></script>
    <script src="avalon.shim.js"></script>
    <script src="avalon.dynamiccss.js"></script>
    <script src="layout.js"></script>
</head>
<body>
    <style>
        html { width: 640px;margin:0 auto; }
        .content-sum {
            display: none;
            position: fixed;
            width:640px;
            top: 0;
            background: #808080;
            height:50px;
            line-height:50px;
            text-align:center;
        }
       .content-full{
            height:9000px;
        }
    </style>
    <style type="text/dynamiccss" ms-controller="layout" ms-dynamiccss> .content-sum { display:{{layout.doc.scrollTop > 135 ? "block" : "none"}}; /* 这里面可以写 js 代码,可以调用 js 方法,基本无限制 */ } </style>

    <b>往下滚动试试</b>

    <div class="big-box">
        <div class="content-sum">经过不懈的努力取得的结果和别人通过关系取得的结果一样甚至更差,那努力还有什么..</div>
        <h1 class="title">经过不懈的努力取得的结果和别人通过关系取得的结果一样甚至更差,那努力还有什么意义呢?</h1>
        <div class="content-full">
            考研过,失败过,后来也成功过。<br /><br />
            去考研论坛围观过连续7战的奇葩,围观过为了考研抛弃女友、抛弃人际关系奋力一战的汉子,围观过被考研折磨的精神失常的病人,也认识大学玩四年,考研复习两个月既考上985(理工科考研,非文科)院校天赋灵异的奇才
            .....
        </div>

    </div>
</body>
</html>

 

如果是用 js 来实现这些效果的话,就会充斥着各种事件,各种变量的加加减减,和 css 选择器更新,代码挺丑的,而且和 dom 类似,情况复杂之后 js 事件相互触发稍有不慎就会坠入苦海。

dynamic-css 是基于 avalon js 的一个扩展,只要是 avalon js 支持的语法,dynamic-css 都能够支持,甚至可以在 css 表达式里面调用 js function。

dynamic-css 使你从此脱离事件和选择器的苦海,来到数据和绑定的乐园!欢迎使用和交流!

本文示例 Source Code:

https://github.com/darklx/dynamic-css

dynamic-css 使用了 jQuery,但并不是必须依赖 jQuery ,只是用了 jQuery 的 $.get 方法,如果你的项目不想引入 jQuery,也是可以的,传给 dynamic-css 具有相同 get 方法功能的对象即可。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/119606.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mac pycharm 配置python「建议收藏」

    mac pycharm 配置python「建议收藏」macpycharm配置python一、首先查看自己安装的python的路径  在terminal运行whichpython(which命令只是根据PATH环境变量找)  例如:/usr/bin/python二、设置python版本  1>Pycharm-Preference-Build,Deployment-PythonConsole-Pythoninterprete

  • SQLServer转MYSQL的方法(连数据)[传]

    SQLServer转MYSQL的方法(连数据)[传]

  • 计算机网络ip地址分类的范围,ip地址分类及范围_ip地址由什么组成

    计算机网络ip地址分类的范围,ip地址分类及范围_ip地址由什么组成ip地址分类及范围1、A类IP地址一个A类IP地址是指,在IP地址的四段号码中,第一段号码为网络号码,剩下的三段号码为本地计算机的号码。A类IP地址中网络的标识长度为8位,主机标识的长度为24位,A类网络地址数量较少,有126个网络,每个网络可以容纳主机数达1600多万台。A类IP地址地址范围1.0.0.1到127.255.255.254。2、B类IP地址一个B类IP地址是指,在IP地址的四段号码…

  • 六种进程间通信方式[通俗易懂]

    六种进程间通信方式[通俗易懂]前言开场小故事炎炎夏日,张三骑着单车去面试花了1小时,一路上汗流浃背。结果面试过程只花了5分钟就结束了,面完的时候,天还是依然是亮的,还得在烈日下奔波1小时回去。面试五分钟,骑车两小时。你看,张三因面试没准备好,吹空调的时间只有…

    2022年10月11日
  • java课程设计-多人聊天工具(socket+多线程)

    大一下学期的java期末课程设计,分享一下文章目录课设要求相关知识点类图项目框架核心代码1.服务器端Server.java课设要求多人聊天工具服务器要求1:能够看到所有在线用户(25%)服务器要求2:能够强制用户下线(25%)客户端要求1:能够看到所有在线用户(25%)客户端要求2:能够向某个用户发送消息(25%)相关知识点1.服务端能够看到所有在线用户服务端继承了JFrame,实现可视化,通过socket实现服务端与客户端的连接,服务端每接收一个连接,把传进来的用户名和对应的s.

  • 高德地图的组成_高德地图 百科

    高德地图的组成_高德地图 百科高德地图由哪几部分组成

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号