Mobile phone APP slide finger to switch image effects,

Source: Internet
Author: User

Mobile phone APP slide finger to switch image effects,

This is a very cool mobile phone APP that uses slide fingers to switch between image effects. In mobile phones, users can slide between the left and right of their fingers to switch between pictures. The same effect can be achieved through the mouse on desktop devices.

Download Online Preview source code

Method of use: HTML Structure

This mobile phone APP switches the HTML structure of image effects using nesting<div>The HTML structure of each image card is enclosed indiv.demo__cardThe image, description, and some additional layers are placed.

123456789101112 <div class="demo__card">  <div class="demo__card__top brown">    <div class="demo__card__img"></div>    <p class="demo__card__name">Hungry cat</p>  </div>  <div class="demo__card__btm">    <p class="demo__card__we">Whatever</p>  </div>  <div class="demo__card__choice m--reject"></div>  <div class="demo__card__choice m--like"></div>  <div class="demo__card__drag"></div></div>             

m--rejectIs the layer when moving the image to the left,m--likeIs the layer when the image is moved to the right,demo__card__dragIs the drag layer.

JavaScript

In jQuery code,pullChange()The function is used to set the Rotation Angle and transparency of the left and right sliding layers.release()The function is used to determine whether the user slides his finger left or right and adds the corresponding class to the DOM element for these actions.

12345678910111213141516171819202122232425262728293031323334353637 function pullChange() {    animating = true;    deg = pullDeltaX / 10;    $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');    var opacity = pullDeltaX / 100;    var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);    var likeOpacity = opacity <= 0 ? 0 : opacity;    $cardReject.css('opacity', rejectOpacity);    $cardLike.css('opacity', likeOpacity);};function release() {    if (pullDeltaX >= decisionVal) {        $card.addClass('to-right');    } else if (pullDeltaX <= -decisionVal) {        $card.addClass('to-left');    }    if (Math.abs(pullDeltaX) >= decisionVal) {        $card.addClass('inactive');        setTimeout(function () {            $card.addClass('below').removeClass('inactive to-left to-right');            cardsCounter++;            if (cardsCounter === numOfCards) {                cardsCounter = 0;                $('.demo__card').removeClass('below');            }        }, 300);    }    if (Math.abs(pullDeltaX) < decisionVal) {        $card.addClass('reset');    }    setTimeout(function () {        $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');        pullDeltaX = 0;        animating = false;    }, 300);};                 

Last listenmousedownAndtouchstartAnd.inactiveTo switch the card.

123456789101112131415161718192021 $(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {    if (animating)        return;    $card = $(this);    $cardReject = $('.demo__card__choice.m--reject', $card);    $cardLike = $('.demo__card__choice.m--like', $card);    var startX = e.pageX || e.originalEvent.touches[0].pageX;    $(document).on('mousemove touchmove', function (e) {        var x = e.pageX || e.originalEvent.touches[0].pageX;        pullDeltaX = x - startX;        if (!pullDeltaX)            return;        pullChange();    });    $(document).on('mouseup touchend', function () {        $(document).off('mousemove touchmove mouseup touchend');        if (!pullDeltaX)            return;        release();    });});                 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.