1

基本的に私が達成しようとしているのは、

  • ユーザーが最初の画像をクリックすると、残りの画像がスライドしてフェードし、コンテンツが読み込まれます。
  • 人が閉じると、4 つの画像に戻ります。
  • 人々が2番目の画像をクリックしたとき; 画像 1、3、4 がスライドしてフェードアウトし、コンテンツが表示されます。

Jqueryをいじってみましたが、結果はゼロでした。

ここにリンクがあります: http://homethai.com.au/testing/test.swf

4

2 に答える 2

0

はい、もちろん。

セットアップは次のとおりです。

  1. 各要素を適切な場所に絶対に配置します。
  2. .leftOffscreen左を-100pxに設定し、必要な最大値に設定するクラスを作成.rightOffscreenします。(機能するようになったら、左/右の代わりに変換を使用してください。これは、一部のブラウザーでハードウェア アクセラレーションが実行され、パフォーマンスが向上するためです)
  3. 各画像に CSS トランジションを追加します。

アルゴリズム：

  1. クリックすると、 .index()を使用して現在の画像を見つけます。
  2. .each()を使用して画像をループします。それらのインデックスがクリックされたものよりも小さい場合はクラスを追加し、leftOffscreen大きい場合はクラスを追加しrightOffscreenます。
  3. x をクリックすると、すべての画像からそれらのクラスが削除されます。
于 2012-07-08T08:17:26.203 に答える
0

これは (少し試行錯誤しながら) 実際にはほとんどが CSS を介して可能であり、プレーンな JavaScript はクラス名を切り替えるためだけに使用されます (ブロックがクリックされたときと閉じるリンクがクリックされたとき)。

.block.active各ブロックがホバー時に展開されるように CSS を に置き換え、閉じるリンク (およびスタイル) を削除する場合.block:hover、JS はまったく必要ありません。

HTML:

<div class="block">
    <div class="closelink">X</div>
</div>
<div class="block">
    <div class="closelink">X</div>
</div>
<div class="block">
    <div class="closelink">X</div>
</div>
<div class="block">
    <div class="closelink">X</div>
</div>

CSS:

body {
    text-align: center
}
.block {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    background: #08f;
    margin: 50px;
    cursor: pointer;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    transition: margin 1s;
    -moz-transition: margin 1s;
    -webkit-transition: margin 1s;
    -o-transition: margin 1s;
    -ms-transition: margin 1s;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none
}
.block .closelink {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -20px;
    top: -20px;
    visibility: hidden;
    font-size: 14px;
    font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif;
    background: #ccc;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px
}
.block.active {
    margin-left: 200px;
    margin-right: 200px
}
.block.active .closelink {
    visibility: visible
}

JavaScript:

window.addEventListener('load', init, false);
function init() {
    var blocks = document.getElementsByClassName('block');
    var closeLinks = document.getElementsByClassName('closelink');
    for(i = 0; i < blocks.length; i++) {
        blocks[i].addEventListener('click', blockClicked, false);
    }
    for(i = 0; i < closeLinks.length; i++) {
        closeLinks[i].addEventListener('click', closeLinkClicked, false);
    }
}
function blockClicked(e) {
    var blocks = document.getElementsByClassName('block');
    for(i = 0; i < blocks.length; i++) {
        blocks[i].className = 'block';
    }
    e.target.className = 'block active';
}
function closeLinkClicked(e) {
    e.stopPropagation();
    e.target.parentElement.className = 'block';
}
于 2012-07-08T09:44:43.567 に答える