0

私は自分のウェブサイトhttp://zakiyadavidson.comで jquery masonry を使用しています。

http://damiencorrell.com/にあるもののようなロールオーバー効果を実行したいと考えています。私の最終結果は、画像テキストをロールオーバーしたときに表示されます。

以下のjsコードを追加しようとしました：

    //Set div dimensions equal to image's dimensions:
$('#image_holder1').width($('#image_1').width());
$('#image_holder1').height($('#image_1').height());
$('#image_1').each(function(){
//set css of right:
$(this).css({right: '-' + $(this).width() + 'px'})})
    //tell the browser what to do when hovering on the div:
    $('#image_holder1').hover(function() {
  //when mouse hover:
$('#image_0').animate({
    right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
    right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
},

function() {
//when mouse out, no hover:
$('#image_0').animate({
    right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
    right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
});​

上記の js コードとともに、以下の css ブロックに追加しました。

#image_holder1 {
overflow: hidden;
}

.image1 {
position: absolute;
}​

石積みの html は、上記の変更を加えた以下のようになります。 

<div class="box photo col3" id="image_holder1">
  <img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" />
  <img id="image_1" src="image_17Hover.jpg" />

...

マウスオーバーしたときに表示される画像ではなく、ページをロードするとすぐに表示されます。石積みのレイアウトが適切に整列されていません。onload イベントの下に機能があるからですか？どんな援助も大歓迎です。

4

1 に答える 1

0

私はそれを考え出した！！！

単純なJqueryスクリプトがそのトリックを実行し、必要な数の写真を作成できるようにします。

<script>

jQuery(function () {
$(".imgSwap img").hover(function () {
    this.src = this.src.replace("_off", "_on");
}, function () {
    this.src = this.src.replace("_on", "_off");
});
});

</script>

これがあなたの他の人に役立つことを願っています。

私のサイトhttp://zakiyadavidson.comにアクセスすると、動作するスクリプトを確認できます。

于 2012-12-31T04:13:03.570 に答える