share_02 移动端拼图小demo

01-先上个效果图

效果图.PNG

02-主要工具

a.zepto.js
b.fx.js
c.selector.js
d.touch.js

简单介绍一下zepto

Zepto modules

module	default	description
zepto	✔	Core module; contains most methods
event	✔	Event handling via on() & off()
ajax	✔	XMLHttpRequest and JSONP functionality
form	✔	Serialize & submit web forms
ie	✔	Add support for Internet Explorer 10+ on desktop and Windows Phone 8.
detect		Provides $.os and $.browser information
fx		The animate() method
fx_methods		Animated show, hide, toggle, and fade*() methods.
assets		Experimental support for cleaning up iOS memory after removing image elements from the DOM.
data		A full-blown data() method, capable of storing arbitrary objects in memory.
deferred		Provides $.Deferred promises API. Depends on the "callbacks" module.
When included, $.ajax() supports a promise interface for chaining callbacks.
callbacks		Provides $.Callbacks for use in "deferred" module.
selector		Experimental jQuery CSS extensions support for functionality such as $('div:first') and el.is(':visible').
touch		Fires tap– and swipe–related events on touch devices. This works with both touch (iOS, Android) and pointer events (Windows Phone).
gesture		Fires pinch gesture events on touch devices
stack		Provides andSelf & end() chaining methods
ios3		String.prototype.trim and Array.prototype.reduce methods (if they are missing) for compatibility with iOS 3.x.

03-主要代码

html部分

css部分

  *{
        box-sizing: border-box;
        touch-action: none;
    }
    .box {
        width: 300px;
        height: 300px;
        background-color: #d5ddff;
        margin: 30px auto;
        position: relative;
    }
    .box div {
        width: 100px;
        height: 100px;
        position: absolute;
    }

    .box div:nth-child(1){
        top:0;
        left:0;
        background: url('img/timg_6.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;
    }
    .box div:nth-child(2){
        top:0;
        left:100px;
        background: url('img/timg_2.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;
    }
    .box div:nth-child(3){
        top:0;
        left:200px;
        background: url('img/timg_1.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;
    }
    .box div:nth-child(4){
        top:100px;
        left:0;
        background: url('img/timg_4.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;
    }
    .box div:nth-child(5){
        top:100px;
        left:100px;
        background: url('img/timg_3.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;
    }
    .box div:nth-child(6){
        top:100px;
        left: 200px;
        background: url('img/timg_7.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;

    }
    .box div:nth-child(7){
        top:200px;
        left:0;
        background: url('img/timg_5.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;
    }
    .box div:nth-child(8){
        top:200px;
        left: 100px;
        background: url('img/timg_0.jpg') 0 0 no-repeat;
        -webkit-background-size: cover;
    }

js部分

$(function () {
var divs = $('.box div');
var posData = [];
for (var i = 0; i < divs.length; i++) {
    var left = $(divs[i]).position().left;
    var top = $(divs[i]).position().top;
    var posObj = {left: left, top: top};
    posData.push(posObj);           //{left: 100, top: 0}
}

var dirR = 1;
var dirD = 1;
divs.swipeRight(function () {
    dirR = 1;
    var index = $(this).index();
    var tempL = $(this).position().left;
    var tempT = $(this).position().top;
    tempL += 100*dirR;
    if (tempL <= 200) {
        for (var i = 0; i < posData.length; i++) {
            var x = posData[i].left;
            var y = posData[i].top;
            if (tempL == x && tempT == y) {
                return;
            }
        }
        $(this).stop().animate({
            left: tempL
        })
        posData.splice(index, 1, {left: tempL, top: tempT});

    } else {
        return;
    }
})
divs.swipeLeft(function(){
    dirR = -1;
    var index = $(this).index();
    var tempL = $(this).position().left;
    var tempT = $(this).position().top;
    tempL += 100*dirR;
    if(tempL >= 0){
        for (var i = 0; i < posData.length; i++) {
            var x = posData[i].left;
            var y = posData[i].top;
            if (tempL == x && tempT == y) {
                return;
            }
        }
        $(this).stop().animate({
            left: tempL
        })
        posData.splice(index, 1, {left: tempL, top: tempT});
    }else {
        return;
    }
})
divs.swipeUp(function(){
    dirD = -1;
    var index = $(this).index();
    var tempL = $(this).position().left;
    var tempT = $(this).position().top;
    tempT += 100*dirD;
    if(tempT >= 0){
        for (var i = 0; i < posData.length; i++) {
            var x = posData[i].left;
            var y = posData[i].top;
            if (tempL == x && tempT == y) {
                return;
            }
        }
        $(this).stop().animate({
            top: tempT
        })
        posData.splice(index, 1, {left: tempL, top: tempT});
    }else {
        return;
    }
})
divs.swipeDown(function () {
    dirD = 1;
    var index = $(this).index();
    var tempL = $(this).position().left;
    var tempT = $(this).position().top;
    tempT += 100*dirD;
    if(tempT <= 200){
        for (var i = 0; i < posData.length; i++) {
            var x = posData[i].left;
            var y = posData[i].top;
            if (tempL == x && tempT == y) {
                return;
            }
        }
        $(this).stop().animate({
            top: tempT
        })
        posData.splice(index, 1, {left: tempL, top: tempT});
    }else {
        return;
    }
})
})