您的当前位置：首页 dynamic-css动态CSS库，使得你可以借助MVVM模式动态生成和更新css，从js事件和css选择器的苦海中脱离出来_html/css_WEB-ITnose

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

来源：爱滋美食网

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

举两个例子：

元素跟随鼠标移动

实现它的源代码：

 元素跟随鼠标移动 - DynamicCss Demo

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

 页面滚动到一定距离时，元素发生变 - DynamicCss Demo化

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