2

単純なHTMLと画像を保持するページにいくつかのdivがあります。divにはそれぞれ一意のIDがあります。

ページが読み込まれると、divのコンテンツが60％になるようにしたいのですが、マウスオーバーすると100％でフェードインします。マウスアウトすると、60％に戻ります。

このサイトはJoomla1.5.xで構築されているため、すでにmootools1.11ライブラリがロードされています。ネットでサンプルコードを探していたところ、jQueryで画像の不透明度を下げるための参照がたくさん見つかりましたが、mootoolsの場合はそれほど多くはありませんでした。

任意のポインタをいただければ幸いです:)

4

3 に答える 3

0

画像を div にラップし、このようなものを使用してフェードすることはできますか?

Fx.Style("div1", "opacity").start(1.0);
于 2009-02-09T12:15:26.000 に答える
0

代わりに CSS3 トランジションを使用してください。それははるかに簡単です。( http://www.w3schools.com/css/css3_transitions.asp )を参照してください。

div.box_panel {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -ms-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

div.box_panel:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
于 2017-01-13T11:34:19.903 に答える
0

解決策を見つけました。mootools 1.2.1 で動作します。imgではなくdivをフェードするようにコードを微調整しました。

私はこれを頭に入れました：

<script type="text/javascript"  src="mootools-1.2.1-core-yc.js"></script>  
<script type="text/javascript">

    var fade_in = 1;
    var fade_out = 0.5;

</script>
</head>
<body onload="$$('div.box_panel').fade(0.5);">

そして、これは私のdivにあります。

<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);">
        <h2>Box One</h2>
        <p>This is a content box and some sample content to pad it out.</p>
</div>

今の問題は、1.11 でこれと同じ効果を得る方法がわからないことです。

于 2009-02-09T15:54:46.970 に答える