2

Web サイトのフォト ギャラリーを作成しています。ページの読み込み時に表示される写真のグリッドが必要です。次に、ユーザーが各写真にカーソルを合わせると、写真が少し拡大されます。

ホバリング用の JavaScript を作成しましたが、これをクラスに適切にパッケージ化する方法がわかりません。

基本的には、このようなリストを作成したいだけです

<ul>
 <li><img src="img1.jpg" /></li>
 <li><img src="img2.jpg" /></li>
</ul>

そして、ホバリング メカニズムが既に配置されている各画像を自動的に作成します。これまでの私のコードは次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.js"></script>
<style text="text/css">
.hoverImage {
    position: absolute;
    width: 200px;
    left: 500px;
    top: 200px;
}
</style>
</head>
<body>
<script>
var originalWidth;
var originalHeight;

function onHover() {
    originalWidth = $(this).width();
    originalHeight = $(this).height();

    $(this).stop(false, true).animate({
            left: $(this).offset().left-(Math.floor(originalWidth/4)),
            top: $(this).offset().top-(Math.floor(originalHeight/4)),
            width: 300,
    },200);
}

function offHover() {
    $(this).stop(false, true).animate({
            left: $(this).offset().left+(Math.floor(originalWidth/4)),
            top: $(this).offset().top+(Math.floor(originalHeight/4)),
            width: 200,
    },200);
}

$(document).ready(function() {
    $("img").hover(onHover, offHover);
});

</script>
<img class="hoverImage" src="Test.jpg"/>
</body>
</html>
4

3 に答える 3

1

機能を再利用可能なものにラップしたい場合は、jQuery 拡張機能を作成することを検討してください。それは難しいことではありません。

ガイドは次のとおりです: http://docs.jquery.com/Plugins/Authoring

于 2012-05-15T05:47:39.127 に答える
1

独自のメソッドで jQuery DOM オブジェクトを拡張したい場合は、これがその方法です。

$.fn.extend({
    relyntsHoverPlugin : function() {}
});

これにより、次のような構文が可能になります

$('ul').relyntsHoverPlugin();

jQuery オブジェクトを新しい関数で拡張することと混同しないでください。$ .relyntsMethod();

これがお役に立てば幸いです。

于 2012-05-15T05:47:42.550 に答える
0

テンプレートを使用して grid/div/table... に画像を作成し、画像に onHover() と offHover() を追加できます。お役に立てば幸いです。

 <script type="text/javascript">
    $(document).ready(function() {
    var data = [
    { name: "Astor", product: "astor", stocklevel: "10"},
    { name: "Daffodil", product: "daffodil", stocklevel: "12"},
    { name: "Rose", product: "rose", stocklevel: "2"},
    { name: "Peony", product: "peony", stocklevel: "0"},
    ];
    $('#flowerTmpl').tmpl(data).appendTo('#row1');
    });
    </script>

    <script id="flowerTmpl" type="text/x-jquery-tmpl">
    <div class="dcell">
    <img src="${product}.png"/>
    <label for="${product}">${name}:</label>
    </div>
    </script>
于 2012-05-15T05:55:52.887 に答える