0

私はMagento 1.7.0.2を使用しており、次のコードがあります:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this-      >stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(275); ?>" width="325" height="488" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(325) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(325) ?>';" />

このコードは、マウスオーバー時にカテゴリ ページの製品のベース イメージをサムネイル イメージに変更します。移行は瞬時です。

マウスオーバー時にベース画像にフェードアウト効果、サムネイル画像にフェードイン効果を追加したいです。画像間の移行の素晴らしい効果を作成できるように。

このjqueryコードを試しましたが、うまくいきませんでした:

function fadeOut(element, src){
element.fadeIn('slow', function() {
        this.attr("src", src);
      });}

onmouseover を次のように置き換えました

onmouseover="fadeOut(this, 'http://imagesource.jpg')"
4

4 に答える 4

0

私が望むものを作成するのは、javascriptまたはjqueryで非常に複雑でした。だから私はphpコードを修正し、いくつかのcssを追加しました。完璧に動作します。

したがって、実際には、マウスオーバー時に1つの画像を使用してソースを変更する代わりに、2つの画像を使用し、一方が他方の後ろにあり、CSS効果がいくつかありました。

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(325); ?>" width="325" height="488" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

<?php if ($this->helper('catalog/image')): ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(325); ?>" width="325" height="488" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'thumbnail'), null, true) ?>" class="thumb" />
<?php endif; ?>

CSSは次のとおりです。

.thumb {position: absolute;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);}
a:hover > .thumb {display:block}

.product-image .thumb {
    transition:         opacity 700ms ease-in-out;
    -moz-transition:    opacity 700ms ease-in-out;
    -webkit-transition: opacity 700ms ease-in-out;
    -o-transition:      opacity 700ms ease-in-out;}

.product-image .thumb:hover { opacity:0.85; filter:alpha(opacity=85); }

.products-grid .product-image .thumb:hover { opacity:1; }
于 2013-08-29T13:26:19.323 に答える
0 
$(".yourclass").mouseover(function(){
$(".classthatfadesout").fadeOut();
$(".classthatfadesin").fadeIn();
});
于 2013-08-28T15:59:03.093 に答える
0

関数に jQuery オブジェクトを渡していますfadeOutか?

これ$はプロトタイプ用に予約されているため、使用する必要があることに注意jQuery.noConflict()して くださいjQuery('.element')

于 2013-08-28T16:38:18.860 に答える