動畫集錦(P2)

二、【.movie】區下方按鈕,大圖替換顯示,並滑鼠靠上去時,產生小圖

範例結果

S1:利用JQ,當按下【.title li】下方按鈕時,照片替換

    //S2:新增Click事件,當按下方鈕時,照片替換
      $('.title li').click(function(){
        $(this).addClass('on').siblings('.on').removeClass('on');
        // console.log($(this).index());
        $('.movie>div').eq($(this).index()).animate({opacity:1},1000)
                      .siblings('div').animate({opacity:0},1000);          
      });

S2:利用JQ,由大圖抓取檔案路徑,置於下方【.title li】後面

S2-1:先在html結構,利用hover加【.hover】類別名稱,加入小圖情形

※JQ沒有【:before】及【:after】偽元素

  <div class="movie">
    <ul class="title">
      <li class="on hover">
          <img src="../images/p2/movie01.jpg" alt="" class="hoverimg">
        <p data-en="Minions">小小兵</p><span>歡樂可愛,處處有梗!</span>
      </li>
      <li><p data-en="Monsters University">怪獸大學</p><span>相信自已才有不可能發生!</span></li>
      ...
    </ul>
    <div class="on hover" data-file="movie01"></div>
    <div data-file="movie02"></div>
    ...
  </div>

S2-2:小圖加入【.hoverimg】後進行CSS美化

.movie{
  .title{
    li{
      &.hover{
        position: relative;
      }
      .hoverimg{
        width:200px; height: 60px; border-radius: 10px;
        box-shadow: 1px 1px 3px #000; border: 1px solid #fff;
        position: absolute; top: -75px; left: 50%; transform: translateX(-50%);
      }
    } // li end
  } // title end
} // movie end

S2-3:測試完成後,將html結構中S2-1步驟的小圖註解,備用

S3:利用JQ,由大圖抓取檔案路徑,置於【.title li】上方

    // $('.title li')相關處理
      $('.title li')
      .click(function(){  
      //S2:新增Click事件,當按下方鈕時,照片替換
        $(this).addClass('on').siblings('.on').removeClass('on');
        // console.log($(this).index());
        $('.movie>div').eq($(this).index()).animate({opacity:1},1000)
                      .siblings('div').animate({opacity:0},1000);          
      })
      .hover(
      //S3:新增hover事件,滑入下方鈕時,顯示小圖
        function(){
          //滑入情形,產生小圖
            $(this).addClass('hover');
            var $hIndex = $(this).index();
            // console.log($hIndex);
            var $himgSrc = $('.movie>div').eq($hIndex).data('file');
            // console.log($himgSrc);
            $(this).prepend('<img src="../images/p2/'+ $himgSrc +'.jpg" class="hoverimg" />');
        }
        ,function(){
          //滑出情形,移除小圖
            $(this).removeClass('hover');
            $(this).children().remove('img');
        }
      );  //hover end

參考連結(本網)