https://github.com/zhaoqize/web-photo-album
web相册
https://github.com/zhaoqize/web-photo-album
Last synced: 3 months ago
JSON representation
web相册
- Host: GitHub
- URL: https://github.com/zhaoqize/web-photo-album
- Owner: zhaoqize
- Created: 2016-09-27T09:56:02.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-28T13:17:15.000Z (almost 9 years ago)
- Last Synced: 2025-02-15T05:15:24.537Z (5 months ago)
- Language: JavaScript
- Size: 7.67 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# web-photo-album
web相册
### | 使用的技术
[zepto.js](http://css88.com/doc/zeptojs_api/) 类jquery库，进行dom操作
[animate.css](https://daneden.github.io/animate.css/) css3库
### | 使用的事件
- 点击 tap
- 单击事件 singleTap
- 双击事件 doubleTap
- 滑动 swipe
- 左滑 swipeLeft
- 右滑 swipeRight
- 上滑 swipeUp
- 下滑 swipeDown
> - “touch”模块添加以下事件，可以使用 on 和 off。 tap —元素tap的时候触发。
> singleTap and doubleTap : 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。
> - longTap : 当一个元素被按住超过750ms触发。
> - swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向) 这些事件也是所有Zepto对象集合上的快捷方法。
```
.delete { display: none; }
- List item 1 DELETE
- List item 2 DELETE
// show delete buttons on swipe
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
// delete row on tapping delete button
$('.delete').tap(function(){
$(this).parent('li').remove()
})
```
### | css的动画事件
animationend 事件在 CSS 动画完成后触发。
CSS 动画播放时，会发生以下三个事件：
- animationstart - CSS 动画开始后触发
- animationiteration - CSS 动画重复播放时触发
- animationend - CSS 动画完成后触发
```
// Chrome, Safari 和 Opera 代码
x.addEventListener("webkitAnimationEnd", myStartFunction);
```
### 效果
