zoukankan      html  css  js  c++  java
  • [组件]—— 图片缩放 组件(移动端)

    源码见这里:https://github.com/CaptainLiao/zujian/tree/master/matrix

    HTML结构:

    <div class="box">
      <img src="d1981a8ba21975314fd2edf9c09447bb.jpg">
      <img src="8e7075a2c6b7fb1e083914db000a70c5.jpg">
      <img src="d1981a8ba21975314fd2edf9c09447bb.jpg">
    </div>
    

    JS:

    function Matrix($el, options) {
        this.$el = $el;
        this.clientW = $(window).width();
        this.imgLen = 0;
        this.cur_x = 0;
        this.start_x = 0;
        // 差值
        this.m = 0;
    
        this.params = $.extend({},{plus: 1.1, reduce: .9}, options);
        this.plus = this.params.plus;
        this.reduce = this.params.reduce;
        // 缩放初始值
        this.s = 1;
        this.flag = false;
    }
    
    Matrix.prototype.chooseImg = function () {
        var _this = this,
            $wrap  = this.$el;
        $wrap.on('click','img' ,function () {
            var mask = $('<div class="fui-mask"></div>'),
                fui_pop = $('<div class="fui-pop"></div>'),
                fui_slider = $('<ul class="fui-slider"></ul>'),
                index,
                $imgs = $wrap.find('img'),
                url = '',
                li = '',
                clientWidth = _this.clientW;
    
            index = $(this).index();
    
            $('body').append(mask).append(fui_pop);
            $('.fui-pop').append(fui_slider);
    
            if($imgs) {
                $imgs.each(function () {
                    url = $(this).attr('src');
                    li += ' <li class="fui-slider-item" style=" '+clientWidth+'px"><img src='+url+' alt=""></li>';
                    _this.imgLen++;
                });
                $('.fui-slider').append(li)
                    .width(_this.imgLen * 100 +'%')
                    .css('left', -index * clientWidth +'px');
            }else {
                alert('请选择图片@@');
                return
            }
    
            _this.touchSlide();
            _this.closeImg();
            _this.scale();
        })
    };
    Matrix.prototype.closeImg = function () {
        var _this = this;
        $('.fui-slider-item').on('click', function (e) {
            $('.fui-pop, .fui-mask').remove();
            _this.imgLen = 0;
        })
    };
    Matrix.prototype.touchSlide = function () {
        var _this = this,
            $slider =  $('.fui-slider'),
            clientW = this.clientW,
            imgLen = this.imgLen;
    
        $slider.on('touchstart', '.fui-slider-item', function (e) {
            var index = $(this).index(),
                m = _this.m,
                left = parseInt($slider.css('left'));
            _this.start_x = e.originalEvent.touches[0].clientX;
    
            if(_this.flag) return;
            _this.flag = true;
    
            $(this).on('touchmove', function (e) {
                _this.cur_x = e.originalEvent.touches[0].clientX;
                m = _this.cur_x - _this.start_x;
                if(Math.abs(m) > 50) {
                    console.log(m);
                    console.log(m);
                    $slider
                        .css('left', left+m+'px')
                        .find('.fui-slider-item').css({
                        'transform': 'scale(1)',
                        'transform-origin': '0% 0%'
                    });
                }
            });
    
            $(this).on('touchend', function (e) {
                _this.flag = false;
                // 每次touchend的时候,将缩放值初始化
                _this.s = 1;
    
                if(Math.abs(m) < clientW / 3){
                    $slider.css('left', left+'px');
                    return;
                }
    
                index = index % imgLen;
    
                if(index ==0){
                    if(m > 0) {
                        $slider.css('left', left+'px');
                    }else {
                        $slider.css('left', left-clientW+'px');
                    }
                }else if(index < imgLen-1){
                    if(m > 0) {
                        $slider.css('left', left+clientW+'px');
                    }else {
                        $slider.css('left', left-clientW+'px');
                    }
    
                }else{
                    if(m < 0) {
                        $slider.css('left', left+'px');
                    }else {
                        $slider.css('left', left+clientW+'px');
                    }
                }
    
            });
        })
    };
    
    Matrix.prototype.scale = function() {
        var _this = this;
    
        $('.fui-slider').on('mousewheel','.fui-slider-item', function(e) {
    
            var
                oEvent = e.originalEvent,
                p_x = 0,
                p_y = 0,
                delta = oEvent.wheelDelta || -oEvent.delta;
    
            if(delta > 0) {
                _this.s *= _this.plus;
            }else {
                _this.s *= _this.reduce;
            }
         
    
            p_x = (oEvent.clientX / $(window).width()) * 100;
            p_y = (oEvent.clientY / $(window).height()) *100 ;
    
            $(this).css({
                'transform': 'scale('+_this.s+')',
                'transform-origin':p_x+'% '+p_y+'%',
                '-webkit-transform-origin': p_x+'% '+p_y+'%'
            });
        })
    };
    
    $.fn.zoom = function (options, cb) {
        var zoom = new Matrix(this, options, cb);
        return zoom.chooseImg();
    };
    
  • 相关阅读:
    c++编程和c在思想上最大的差别
    java反射field和method的顺序问题
    使用wireshark分析tcp/ip报文之报文头
    wireshark不支持抓localhost/127.0.0.1的包解决方法
    wireshark捕获表达式之Berkeley Packet Filter (BPF) syntax
    java replaceAll之$替换
    阿里云至今不支持组播,确实比较坑爹
    java安全体系之JCA、JCE、JAAS、JSSE及其关系
    一个风控计算负载过高到mysql主从拆分暴露的各种设计复杂性问题以及解决方法总结
    作为从业人员,如果一定要学一门新的编程语言,那么它一定是c++
  • 原文地址:https://www.cnblogs.com/fayin/p/6532595.html
Copyright © 2011-2022 走看看