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>