当前位置:Gxlcms > html代码 > dynamic-css动态CSS库,使得你可以借助MVVM模式动态生成和更新css,从js事件和css选择器的苦海中脱离出来_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:41人阅读

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

人气教程排行