当用户将鼠标悬停在幻灯片上而不是双击时,是否可以实现缩放功能？双击方法非常适合触摸,但对于桌面而言,它不是那么直观,而且会对其他交互元素(例如链接等)造成严重破坏.
通过鼠标悬停进行缩放应该允许用户相对于鼠标到幻灯片中心的位置也围绕缩放的幻灯片图像进行导航.将鼠标移动到右上方会将幻灯片图像平移并缩放到右上方区域,同样将鼠标移动到缩放容器内的任何其他角落或区域.
如果有一个开关也可以在变焦上启用反转平移,这也很方便(例如,将光标移动到左上方会平移并缩放到图像的右下方).
解决方法
使用Swiper js库放大和缩小图像.
<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();
})
}
