ホームページ >ウェブフロントエンド >htmlチュートリアル >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
WBOYオリジナル
2016-06-24 11:31:581052ブラウズ

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 に渡すだけです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。