我该怎么介绍它呢?其实它很简单,没什么功能。但是既然已经做了个插件,想着没准也有人需要这样的实现,就拿出来共享一下吧,其实自己写一个也很简单。

效果我感觉用语言不好说,所以才给它起了这么个不知云的名字 —— clipBox。但还是简单描述一下吧,就是在一个框(Box)里可以拖动图片形成一种剪切效果,为的是在小屏幕上查看大图片。就像在一个小窗口里浏览Google地图一样。简单吧?由于时间的关系我只开放了两个切换图片的接口,即clipBox.prev() 和 clipBox.next(),调用时可以传入imgScale参数来缩放图片。其实想想,如果你需要的话可以把它做的更完善一点,比如开放一个双击放大/缩小的接口。

你可以扫一下下面的二维码来查看最终效果:

1537022477

用法如下:

<script type="text/javascript">
$(function(){
	var clipBox = $('#clipBox_1').clipBox();
	$('.prev').on('click',function(e){
		clipBox.prev();
		return false;
	});
	$('.next').on('click',function(e){
		clipBox.next();
		return false;
	});
	
	/* 
	 * 你可以在一个页面中多处使用clipBox,
	 * 并记录下反回的对象以便操作其提供的接口
	 *
	 * var clipbox2 = $('#clipBox_2').clipBox();
	 * var clipbox3 = $('#clipBox_3').clipBox();
	 */
});
</script>

<div id="clipBox_1">
	<img src="img/test0.jpg" height="730" width="560" alt="">
	<img src="img/test1.jpg" height="560" width="730" alt="">
	<img src="img/test2.jpg" height="560" width="730" alt="">
	<img src="img/test3.jpg" height="730" width="560" alt="">
</div>
<a href="" class="prev">上一个</a>|<a href="" class="next">下一个</a>

以下是插件源码,你也可以在Github上查看最新版本:

/*!     
        zepto.clipBox.js
        v 1.0
        David

http://www.CodingSerf.com

        插件公开两个方法用于切换图片(下例):

        var clipBox = $('.clipBox').clipBox({imgScale: 0.8}); //图片缩放0.8显示
        $('.prev').on('click',function(e){
            clipBox.prev(); //前一张
            return false; //可能是a标签,注意返回false
        });
        $('.next').on('click',function(e){
            clipBox.next(); //后一张
            return false; //可能是a标签,注意返回false
        });
*/
;(function($){
    $.fn.clipBox = function(option){
        var opts = $.extend({}, $.fn.clipBox.defaults, option), //配置选项
            $this = this,
            clipBoxStylePosition = $this.css('position'),
            boxWidth = $this.width(),
            boxHeight = $this.height(),
            $imgs = this.find('img'),//.css({'width':opts.imgScale*100+'%', 'height': 'auto'}),
            imgsLength = $imgs.length,
            imgsInfo = [],
            currIndex = 0,
            top_z_index = 100,
            startX = 0,
            startY = 0;

        //初始化
        $this.css({'overflow':'hidden'});
        clipBoxStylePosition == 'absolute' || clipBoxStylePosition == 'fixed' || ($this.css({'position':'relative'}));
        for (var i = 0, $img, imgW, imgH, wGap, hGap, initX, initY; i<imgsLength; i++) {
            $img = $imgs.eq(i);

            imgW = $img.width()*opts.imgScale;
            imgH = $img.height()*opts.imgScale;

            wGap = boxWidth - imgW;
            hGap = boxHeight - imgH;

            initX = wGap/2;
            initY = hGap/2;

            imgsInfo[i] = {};
            imgsInfo[i].initPosition = {x: initX, y: initY};
            imgsInfo[i].currPosition = {x: initX, y: initY};
            imgsInfo[i].bounce = {x0: 0, y0: 0, x1: wGap, y1: hGap};

            $img.css({
                'position':'absolute',
                'left':initX,
                'top': initY,
                'width': imgW,
                'height': imgH,
            }).hide();
        };
        $imgs.eq(0).css({'z-index':top_z_index}).show();
        
        //注册事件
        $this.on('touchstart',function(e){
            var touch = e.touches[0];

            startX = touch.clientX;
            startY = touch.clientY;

            e.stopImmediatePropagation(); //阻止页面在clipBox区域触发滚动
        }).on('touchmove',function(e){
            var $currImg = $imgs.eq(currIndex),
                imgInfo = imgsInfo[currIndex],
                touch = e.touches[0],
                moveX = touch.clientX,
                moveY = touch.clientY,
                targetX = moveX - startX + imgInfo.currPosition.x,
                targetY = moveY - startY + imgInfo.currPosition.y,
                isOutOfBounceX = targetX<=imgInfo.bounce.x1 || targetX >=imgInfo.bounce.x0,
                isOutOfBounceY = targetY<=imgInfo.bounce.y1 || targetY >=imgInfo.bounce.y0;
            
            isOutOfBounceX && (targetX = imgInfo.currPosition.x);
            isOutOfBounceY && (targetY = imgInfo.currPosition.y);

            startX = moveX;
            startY = moveY;

            $currImg.css({'left':targetX, 'top': targetY});
            imgInfo.currPosition = {x: targetX, y: targetY};

            e.stopImmediatePropagation(); //阻止页面在clipBox区域触发滚动
        }).on('touchend',function(e){
            e.stopImmediatePropagation(); //阻止页面在clipBox区域触发滚动
        });

        
        //切换图片
        function switchImg(flag){
            var switchIndex = currIndex + flag,
                imgInfo,
                initPosition;
            
            switchIndex < 0 && (switchIndex = imgsLength-1);
            switchIndex > imgsLength-1 && (switchIndex = 0);

            imgInfo = imgsInfo[switchIndex];
            initPosition = imgInfo.initPosition;
            imgInfo.currPosition = {x:initPosition.x, y:initPosition.y},
            $imgs.eq(switchIndex).css({'z-index':top_z_index,'left':initPosition.x, 'top':initPosition.y}).show();
            $imgs.eq(currIndex).css({'z-index':''}).hide();

            currIndex = switchIndex;
        };
        //链式返回
        this.prev = function(){
            switchImg(-1);
        };
        this.next = function(){
            switchImg(+1);
        };
        return this;
    };
    $.fn.clipBox.defaults = {
        imgScale: 1 //图片缩放比例0.0~1.0,图片会按实际尺寸缩放,而不是参考父层div
    };
})(Zepto);

好了,就是这样。