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

时间 2019-11-15

标签 dynamic css 动态使得能够借助 mvvm 模式生成更新事件选择器苦海脱离出来栏目 CSS 繁體版

原文原文链接

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

举两个例子：html

元素跟随鼠标移动

实现它的源代码：jquery

<!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>

页面滚动到必定距离时，元素发生变化

<!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 事件相互触发稍有不慎就会坠入苦海。git

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

dynamic-css 使你今后脱离事件和选择器的苦海，来到数据和绑定的乐园！欢迎使用和交流！chrome

本文示例 Source Code：

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

dynamic-css 使用了 jQuery，但并非必须依赖 jQuery ，只是用了 jQuery 的 $.get 方法，若是你的项目不想引入 jQuery，也是能够的，传给 dynamic-css 具备相同 get 方法功能的对象便可。ui

1. 使用PHP来动态生成CSS/JS
2. 借助CSS来管理js事件
3. 动态加载JS和CSS
4. CSS动态伪类选择器温故
5. 用js动态生成css代码
6. 用JS来动态设置CSS样式
7. css和jq的事件选择器
8. js动态加载css和js
9. 动态的 css——less
10. css选择器
更多相关文章...
• W3C CSS 活动 - W3C 教程
• CSS 指南 - 网站建设指南
• SpringBoot中properties文件不能自动提示解决方法
• IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决