在Swiper JS中放大鼠标悬停

Question

当用户将鼠标悬停在幻灯片上而不是双击时,是否可以实现缩放功能？双击方法非常适合触摸,但对于桌面而言,它不是那么直观,加上它会对其他交互元素(例如链接等)造成严重破坏.

通过鼠标悬停进行缩放应该允许用户相对于鼠标到幻灯片中心的位置也围绕缩放的幻灯片图像进行导航.将鼠标移动到右上方会将幻灯片图像平移并缩放到右上角区域,同样将鼠标移动到缩放容器内的任何其他角落或区域.

如果有一个开关也可以在变焦上启用反转平移,这也很方便(例如,将光标移动到左上方会平移并缩放到图像的右下方).

Answer 1

使用 js 库放大和缩小图像Swiper。

超文本标记语言

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/zakiwarfel/128.jpg" class="media-object img-circle thumbnail">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" class="media-object img-circle thumbnail">
                </div>
            </div>
            <div class="swiper-slide">Plain slide with text</div>
            <div class="swiper-slide">
                <!-- Override maxRatio parameter -->
                <div class="swiper-zoom-container" data-swiper-zoom="5">
                    <img src="path/to/image1.jpg">
                </div>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

JS

    var mySwiper = new Swiper('.swiper-container', {
      zoom: {
        maxRatio: 5,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
       }
    });
    
    var swiperSlide = document.getElementsByClassName('swiper-slide')
    for(var index = 0; index< swiperSlide.length; index++){
    swiperSlide[index].addEventListener('mouseover',function(e){
        mySwiper.zoom.in();
    })
    
    swiperSlide[index].addEventListener('mouseout',function(e){
        mySwiper.zoom.out();
    })
    }

Answer 2

您可以在鼠标悬停事件上调用以下方法。

mySwiper.zoom.in

这里的mySwiper是Swiper类的实例。您可以通过link获得信息。这是例子。

window.Myswiper = new Swiper('.swiper-container', {
  zoom: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
img1.addEventListener("mousemove", function() {
if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img1.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})
img2.addEventListener("mousemove", function() {
  if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img2.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  overflow: hidden;
}

<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img1" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-hi.png">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img2" src="http://www.clker.com/cliparts/3/k/L/m/P/2/yellow-apple-md.png">
      </div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>