ホームページ > 記事 > ウェブフロントエンド > Dynamic-css は、MVVM パターンを使用して CSS を動的に生成および更新できる動的 CSS ライブラリであり、JS イベントや CSS selectors_html/css_WEB-ITnose の煩わしさから解放されます。
Dynamic-css は、MVVM パターンを使用して CSS を動的に生成および更新できる動的 CSS ライブラリであり、JS イベントや CSS selectors_html/css_WEB-ITnose の煩わしさから解放されます。
- WBOYオリジナル
- 2016-06-24 11:31:581003ブラウズ
dynamic-css を使用すると、MVVM パターンを利用して CSS を動的に生成および更新できるため、このプラグインが登場する前に js 内に散在してネストされていたスタイルを変更するコードを削除できます。たとえば、要素をマウスの動きに追従させたり、スクロール バーの位置の変化に基づいて何らかの効果をトリガーしたりする場合、最初はスクロール イベントをバインドする js を記述し、オフセットを計算し、次に、dynamic-css を使用して要素 css を更新します。必要なのは、文法に従って CSS 式を記述するだけです。もともと複雑な JS の判断が必要な一部の動的 CSS については、動的 CSS 式を使用して、数行のコードで実行できます。
2 つの例:
要素はマウスの動きに追従します
それを実装するソースコード:
<!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> <strong><style type="text/dynamiccss" ms-controller="layout" ms-dynamiccss> .mouse-follow { position: absolute; top:{{layout.mouse.pageY}}px; left:{{layout.mouse.pageX}}px; } </style></strong> <div class="<strong>mouse-follow</strong>">为什么追我</div></body></html> ページが一定の距離までスクロールすると、要素が変化します
rrリー
これらの効果を実現するために js を使用すると、さまざまなイベント、さまざまな変数の加算と減算、CSS セレクターの更新が満載になり、コードは非常に醜くなり、dom に似ています。状況は複雑で、JS のイベントが微妙にトリガーされ、注意しないと不幸の海に落ちてしまいます。
dynamic-css は avalon js をベースにした拡張機能で、avalon js でサポートされている構文であれば CSS 式で js 関数を呼び出すこともできます。
dynamic-css は、イベントやセレクターの悲惨さからあなたを解放し、データとバインディングの楽園にやって来ます。ご利用、コミュニケーション大歓迎です！
この記事のソースコード例:
https://github.com/darklx/dynamic-css
dynamic-css は jQuery を使用しますが、jQuery の $.get メソッドを使用するだけです。プロジェクトに jQuery を導入したくない場合は、同じ get メソッド関数を使用してオブジェクトを Dynamic-css に渡すだけです。