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

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

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

 

举两个例子:

元素跟随鼠标移动

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

实现它的源代码:

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

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

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

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/119606.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python anaconda jupyter_anaconda和pip

    python anaconda jupyter_anaconda和pipAnaconda、Python、Jupyter、Pycharm、Spyder、conda、pip傻傻分不清楚??黑人问号脸.jpgPython易用,但用好却不易,其中比较头疼的就是包管理和Python不同版本的问题,特别是当你使用Windows的时候。为了解决这些问题,有不少发行版的Python,比如WinPython、Anaconda等,这些发行版将python和许多常用的package打包…

  • 学习SQL Server这一篇就够了

    学习SQL Server这一篇就够了目录第一章数据库概述1.1、数据库的好处1.2、数据库的常见概念1.3、数据库的存储特点1.4、数据库的常见分类1.5、SQL语言的分类第二章SQLServer概述2.1、SQLServer的概述2.2、SQLServer的下载2.3、SQLServer的安装2.4、SQLServer的第一种连接2.5、SQLServer的第二种连接2.6、SQLServer的连接说明第三章SQLServer数据库管理3.1、创建数据库3.1.1、界面方式3.1.2、命令方式3.2、修改数据库3.2.

  • 4个线程池_vc2010线程win32线程已退出

    4个线程池_vc2010线程win32线程已退出在windows中,系统提供了QueueUserWorkItem函数实现异步调用,这个函数相当于在线程池中建立多个用户工作项目,跟普通线程机制一样,线程池也有线程的同步等机制。 【函数原型】BOOLWINAPIQueueUserWorkItem(__inLPTHREAD_START_ROUTINEFunction,__inP…

  • c++ stl map实现_JAVA map

    c++ stl map实现_JAVA mapC++STL库map详解

    2022年10月15日
  • 对不起,学会这些 Linux 知识后,我有点飘

    对不起,学会这些 Linux 知识后,我有点飘Linux简介UNIX是一个交互式系统,用于同时处理多进程和多用户同时在线。为什么要说UNIX,那是因为Linux是由UNIX发展而来的,UNIX是由程序员设计,它的主要服务对象也是程序员。Linux继承了UNIX的设计目标。从智能手机到汽车,超级计算机和家用电器,从家用台式机到企业服务器,Linux操作系统无处不在。大多数程序员都喜欢让系统尽量简单,优雅并具有一致性。举个例子,从最底层的角度来讲,一个文件应该只是一个字节集合。为了实现顺序存取、随机存取、按键存取、远程存取只能是

  • Mybatis RowBounds 分页原理「建议收藏」

    Mybatis RowBounds 分页原理「建议收藏」在mybatis中,使用RowBounds进行分页,非常方便,不需要在sql语句中写limit,即可完成分页功能。但是由于它是在sql查询出所有结果的基础上截取数据的,所以在数据量大的sql中并不适用,它更适合在返回数据结果较少的查询中使用最核心的是在mapper接口层,传参时传入RowBounds(intoffset,intlimit)对象,即可完成分页注意:由于java允许的最大整数为2147483647,所以limit能使用的最大整数也是214748…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号