使用JQuery实现图片阻尼效果

我不是女神ヾ 2023-10-08 11:20 48阅读 0赞

> 前段时间，临时去顶替前端开发，要求实现一个阻尼效果。其实这种类似轮播图的相关功能，有很多插件可以完成，例如：**swiper**、**better-scroll**等等。如果只想使用JQuery来完成的话，不妨看看下面的示例代码。

### 一、html ###

### 二、CSS ###

html, body {
        
      height: 100%;
    }
    
    body {
        
      margin: 0;
      overflow: hidden;
      background-color: #333;
    }
    
    #slides {
        
      width: 100%;
      height: 100%;
      white-space: nowrap;
      font-size: 0;
      transform: translateX(0);
    }
    
    .slide {
        
      width: 100%;
      height: 100%;
      display: inline-block;
      background-size: cover;
      background-position: center;
      background-color: #cccccc;
    }
    
    .animate {
        
      transition: all .5s ease-out;
    }
    
    .slide:nth-child(1) {
        background-image: url(http://fakeimg.pl/640x480/);}
    .slide:nth-child(2) {
        background-image: url(http://fakeimg.pl/641x480/);}
    .slide:nth-child(3) {
        background-image: url(http://fakeimg.pl/642x480/);}
    .slide:nth-child(4) {
        background-image: url(http://fakeimg.pl/643x480/);}
    .slide:nth-child(5) {
        background-image: url(http://fakeimg.pl/644x480/);}

### 三、JS ###

$(function() {
        
      var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0;
      slideCount = $('.slide').length;
      
      $('html').on('mousedown touchstart', slideStart);
      $('html').on('mouseup touchend', slideEnd);
      $('html').on('mousemove touchmove', slide);
      
      /**
      / Triggers when slide event started
      */
      function slideStart(event) {
        
        // If it is mobile device redefine event to first touch point
        if (event.originalEvent.touches)
          event = event.originalEvent.touches[0];
        // If sliding not started yet store current touch position to calculate distance in future.
        if (sliding == 0) {
        
          sliding = 1; // Status 1 = slide started.
          startClientX = event.clientX;
        }
      }
      
      /** Occurs when image is being slid.
      */
      function slide(event) {
        
        event.preventDefault();
        if (event.originalEvent.touches)
          event = event.originalEvent.touches[0];
        // Distance of slide.
        var deltaSlide = event.clientX - startClientX;
        // If sliding started first time and there was a distance.
        if (sliding == 1 && deltaSlide != 0) {
        
          sliding = 2; // Set status to 'actually moving'
          startPixelOffset = pixelOffset; // Store current offset
        }
        
        //  When user move image
        if (sliding == 2) {
        
          // Means that user slide 1 pixel for every 1 pixel of mouse movement.
          var touchPixelRatio = 1;
          // Check for user doesn't slide out of boundaries
          if ((currentSlide == 0 && event.clientX > startClientX) ||
             (currentSlide == slideCount - 1 && event.clientX < startClientX))
            // Set ratio to 3 means image will be moving by 3 pixels each time user moves it's pointer by 1 pixel. (Rubber-band effect)
            touchPixelRatio = 3;
          // Calculate move distance.
          pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
          // Apply moving and remove animation class
          $('#slides').css('transform', 'translateX(' + pixelOffset + 'px').removeClass();
        }
      }
      
      /** When user release pointer finish slide moving.
      */
      function slideEnd(event) {
        
        if (sliding == 2){
        
          // Reset sliding.
          sliding = 0;
          // Calculate which slide need to be in view.
          currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide -1;
          // Make sure that unexisting slides weren't selected.
          currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1);
          // Since in this example slide is full viewport width offset can be calculated according to it.
          pixelOffset = currentSlide * -$('body').width();
          // Remove style from DOM (look below)
          $('#temp').remove();
          // Add a translate rule dynamically and asign id to it
          $('<style id="temp">#slides.animate{transform:translateX(' + pixelOffset + 'px)}</style>').appendTo('head');
          // Add animate class to slider and reset transform prop of this class.
          $('#slides').addClass('animate').css('transform', '');
        }
      }
      
    });

> `注意：`可能存在图片尺寸问题，具体还请结合自身的需求调试，此代码只作为Demo。