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

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

 

举两个例子：

元素跟随鼠标移动

实现它的源代码：

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

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 方法功能的对象即可。

 

posted @ 2015-12-14 23:45  darklx  阅读(1692)  评论(2)  编辑  收藏  举报