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部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/cssreset-min.css"/>
</head>
<body>
<div class="box">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
</div>
<script src="lib/zepto.min.js"></script>
<script src="lib/fx.js"></script>
<script src="lib/selector.js"></script>
<script src="lib/touch.js"></script>
<script src="js/index.js"></script>
</body>
</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;
}
})
})
