悬停时图像滚动-jQuery imageScroller

图像滚动儿是一个非常简单的jQuery插件,如果图像的高度比它的容器的高度更大,这会自动滚动悬停图像。

如何使用它:

  • 将图像包装到具有固定高度的容器中。请注意,如果图像的高度小于屏幕的高度,则插件不会滚动图像。
<div class="screen">
  <img src="1.jpg">
</div>
<div class="screen">
  <img src="2.jpg">
</div>
<div class="screen">
  <img src="3.jpg">
</div>
.screen {
  height: 350px;
  overflow: hidden;
}
  • 将jQuery库和JavaScript文件jquery-image-scroll.js放在结束body标签之前。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous">
</script>
<script src="jquery-image-scroll.js"></script>
  • 通过scrollImage()在图像容器上调用函数来启用悬停滚动效果。
$( window ).on( 'load', function(){
  $( '.screen' ).scrollImage();
})
  • 使用如下data-duration属性来自定义滚动动画的持续时间:
<div class="screen" data-duration="1000">
  <img src="1.jpg">
</div>
<div class="screen" data-duration="3000">
  <img src="2.jpg">
</div>
<div class="screen" data-duration="5000">
  <img src="3.jpg">
</div>

这个很棒的jQuery插件是由uzess开发的。有关更多高级用法,请查看演示页面或访问官方网站

版权内容
MixMarker » 悬停时图像滚动-jQuery imageScroller

提供最优质的资源集合

立即查看 了解详情