0

私はjsfiddleを作成しましたが、これは非常に自明であることを願っています。

ホバー時に小さな画像を大きな画像に置き換えることができましたが、マウスが親指のいずれかを離れたときに画像を元の状態(デフォルト)に戻そうとしています。

jsfiddle

$('.small a img').on('click hover',function(){
$('.large img').attr('src',$(this).attr('src'));
});
$('small a img').on('mouseleave',function(){
$('.large img').attr('src',$(this).attr('.large img'));
});

誰でもこれを行うための最良の方法を教えてもらえますか?

ありがとう

4

2 に答える 2

4

これを試してください

   <div class="large">
       <a href=""><img src1="http://placehold.it/300x300/" src="http://placehold.it/300x300/"        /></a>
   </div>

   <div class="small">
       <a href="#"><img src="http://placehold.it/300x300/000fff" /></a>
       <a href="#"><img src="http://placehold.it/300x300/fff000" /></a>
   </div>
   <script type="text/javascript">
   $(".small a img").mouseenter(function(){
        $('.large img').attr('src',$(this).attr('src'));
  }).mouseleave(function(){
        $('.large img').attr('src',$('.large img').attr('src1'));
  });
  </script>
      <style>
    .large img
    {
        width: 300px;
    }
    .small
    {
        clear: both;
    }
    .small img
    {
        width: 150px;
        float: left;
    }
</style>

http://jsfiddle.net/Xm2Be/653/

見てみな

于 2013-06-07T09:28:28.400 に答える
1

使用していたコードは画像ソースを切り替えているため、マウス カーソルが小さいサムネイルから離れると、メイン画像のソースが変更され、元に戻すデフォルトがありませんでした。

「mouseleave」関数を使用して、必要な効果を実現するデフォルトの画像のソースを追加しました。

したがって、「mouseenter」は画像ソースを置き換え、「mouseleave」は元に戻します。

見てみましょう: http://jsfiddle.net/WolfHook/Xm2Be/672/

<script>
$('.small img').mouseenter(function(){
    $('.large img').attr('src',$(this).attr('src'));
}).mouseleave(function(){
    $('.large img').attr('src','http://placehold.it/300x300/');
});
</script>
于 2013-06-07T13:27:11.733 に答える