Question

当用户将鼠标悬停在幻灯片上而不是双击时是否可以使用缩放功能？双击方法非常适合触摸，但对于台式机而言却不那么直观，而且还会对其他交互式元素（例如链接等）造成破坏。

通过鼠标悬停进行缩放可以使用户也可以相对于鼠标到幻灯片中央的位置在缩放的幻灯片图像周围进行导航。将鼠标移到右上角会平移幻灯片图像并将其缩放到右上角的区域，就像将鼠标移到缩放容器内的任何其他角落或区域一样。

如果有一个开关也可以启用缩放时的反向平移，这也很方便（例如，将光标移动到左上角将平移并缩放到图像的右下角）。

Answer 1

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

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>

Answer 2

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

HTML

<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 3

对于使用 react-id-swiper 并且还使用滑动垂直缩略图

的用户

这是代码示例。

var row_id = $(this.triggeringElement).attr('id').substr(4);

在Swiper JS中放大鼠标悬停

3 个答案: