Question

我有一个网站想要出售带瓶盖的瓶子。

这是参考网站，但它在闪光灯中。 http://harmanindia.com/mixandmatch.php

我想以这样的方式编写脚本，即用户可以使用每个瓶子预览每个瓶盖，以便他们可以选择更好的选择。

任何人都可以提供参考代码，这将有助于我开发。

谢谢并提前。

Answer 1

请您查看我创建的这个网站 Html代码

<div class="img-swap">
  <ul>
    <li>
      <a  class="active" href="">
        <span>
          One Sided
        </span>
        <img height="100" width="100" src="/images/product/51614099_business_cards01.png">
        <input type="hidden" value="/images/product/538734762_business_cards.png" class="oImg">
        <input type="hidden" value="/images/product/51614099_business_cards01.png" class="hImg">
      </a>
    </li>

    <li>
      <a class="inactive" href="">
        <span>
          Second Side
        </span>
        <img height="140" width="140" src="/images/product/2112217909_page_24.png">
        <input type="hidden" value="/images/product/2112217909_page_24.png" class="oImg">
        <input type="hidden" value="/images/product/1550391892_page_024.png" class="hImg">
      </a>
    </li>


  </ul>
</div>

Jquery代码

var oImg,hImg;

    jQuery('.img-swap li a:not(.active)').mouseover(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',hImg);
    });

    jQuery('.img-swap li a.active').mouseover(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',hImg);
    });

    jQuery('.img-swap li a:not(.active)').mouseout(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',oImg);
    });

    jQuery('.img-swap li a.active').mouseout(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',hImg);
    });

    jQuery( ".img-swap li a.active" ).each(function() {
          oImg = jQuery(this).find('.oImg').val();
          hImg = jQuery(this).find('.hImg').val();  
          jQuery(this).find('img').attr('src',hImg);
    });

    jQuery( ".img-swap li a.inactive" ).each(function() {
         oImg = jQuery(this).find('.oImg').val();
          hImg = jQuery(this).find('.hImg').val();    
          jQuery(this).find('img').attr('src',oImg);
    });

jquery javascript将图像放在另一个图像上

1 个答案: