jquery-fly-rails 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +28 -0
- data/LICENSE +22 -0
- data/README.md +44 -0
- data/lib/jquery-fly-rails.rb +10 -0
- data/lib/jquery-fly-rails/version.rb +7 -0
- data/vendor/assets/javascripts/jquery-fly.js +140 -0
- data/vendor/assets/javascripts/requestAnimationFrame.js +27 -0
- metadata +52 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: fcd8df887053e97d7d0fb6855ea6fc5f08322e5f
|
4
|
+
data.tar.gz: 35ceebb9709dbccc471c2ac698425c299fcd42b7
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 887dba0b579bf3489b66222a864243b32b3fd518f58d9ea5d5aafb96943d4df6e1ccfdefea6e5732cdee0b5d22817392e7865e3e0ef1d5a6f50311ad922e6b5e
|
7
|
+
data.tar.gz: 7b92e97377e77217424493d59f8bc6a47618e2188e59663cee94623c4b1efdb7dc5ef8a2ec19304b76aa277fa0b8cac3503744fb522927b81b8e6379a5b06879
|
data/.gitignore
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
*.gem
|
2
|
+
*.rbc
|
3
|
+
.bundle
|
4
|
+
.config
|
5
|
+
.yardoc
|
6
|
+
Gemfile.lock
|
7
|
+
InstalledFiles
|
8
|
+
_yardoc
|
9
|
+
coverage
|
10
|
+
doc/
|
11
|
+
lib/bundler/man
|
12
|
+
pkg
|
13
|
+
rdoc
|
14
|
+
spec/reports
|
15
|
+
test/tmp
|
16
|
+
test/version_tmp
|
17
|
+
tmp
|
18
|
+
|
19
|
+
# OS generated files #
|
20
|
+
######################
|
21
|
+
.DS_Store
|
22
|
+
.DS_Store?
|
23
|
+
._*
|
24
|
+
.Spotlight-V100
|
25
|
+
.Trashes
|
26
|
+
ehthumbs.db
|
27
|
+
Thumbs.db
|
28
|
+
*.sublime-workspace
|
data/LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2015 wuyuedong hzxs1990225@163.com
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,44 @@
|
|
1
|
+
Jquery-Fly-Rails [![Gem Version][version-badge]][rubygems]
|
2
|
+
================
|
3
|
+
|
4
|
+
[Add to cart - animation effect](https://github.com/amibug/fly) rails wrap.
|
5
|
+
|
6
|
+
## Installation
|
7
|
+
|
8
|
+
Add this line to your application's Gemfile:
|
9
|
+
|
10
|
+
gem 'jquery-fly-rails'
|
11
|
+
|
12
|
+
And then execute:
|
13
|
+
|
14
|
+
$ bundle
|
15
|
+
|
16
|
+
## How to use
|
17
|
+
|
18
|
+
```javascript
|
19
|
+
jQuery(function($) {
|
20
|
+
$('#fly').fly({
|
21
|
+
start:{
|
22
|
+
left: 11, //开始位置(必填)#fly元素会被设置成position: fixed
|
23
|
+
top: 600, //开始位置(必填)
|
24
|
+
},
|
25
|
+
end:{
|
26
|
+
left: 500, //结束位置(必填)
|
27
|
+
top: 130, //结束位置(必填)
|
28
|
+
width: 100, //结束时高度
|
29
|
+
height: 100, //结束时高度
|
30
|
+
},
|
31
|
+
autoPlay: false, //是否直接运动,默认true
|
32
|
+
speed: 1.1, //越大越快,默认1.2
|
33
|
+
vertex_Rtop:100, //运动轨迹最高点top值,默认20
|
34
|
+
onEnd: function(){} //结束回调
|
35
|
+
});
|
36
|
+
$('#fly').play(); //autoPlay: false后,手动调用运动
|
37
|
+
$('#fly').destroy(); //移除dom
|
38
|
+
});
|
39
|
+
```
|
40
|
+
|
41
|
+
Or check [official demo](http://codepen.io/hzxs1990225/full/ogLaVp)
|
42
|
+
|
43
|
+
[version-badge]: https://badge.fury.io/rb/jquery-fly-rails.svg
|
44
|
+
[rubygems]: https://rubygems.org/gems/jquery-fly-rails
|
@@ -0,0 +1,140 @@
|
|
1
|
+
/*
|
2
|
+
* jquery.fly
|
3
|
+
*
|
4
|
+
* 抛物线动画
|
5
|
+
* @github https://github.com/amibug/fly
|
6
|
+
* Copyright (c) 2014 wuyuedong
|
7
|
+
* copy from tmall.com
|
8
|
+
*/
|
9
|
+
(function ($) {
|
10
|
+
$.fly = function (element, options) {
|
11
|
+
// 默认值
|
12
|
+
var defaults = {
|
13
|
+
version: '1.0.0',
|
14
|
+
autoPlay: true,
|
15
|
+
vertex_Rtop: 20, // 默认顶点高度top值
|
16
|
+
speed: 1.2,
|
17
|
+
start: {}, // top, left, width, height
|
18
|
+
end: {},
|
19
|
+
onEnd: $.noop
|
20
|
+
};
|
21
|
+
|
22
|
+
var self = this,
|
23
|
+
$element = $(element);
|
24
|
+
|
25
|
+
/**
|
26
|
+
* 初始化组件,new的时候即调用
|
27
|
+
*/
|
28
|
+
self.init = function (options) {
|
29
|
+
this.setOptions(options);
|
30
|
+
!!this.settings.autoPlay && this.play();
|
31
|
+
};
|
32
|
+
|
33
|
+
/**
|
34
|
+
* 设置组件参数
|
35
|
+
*/
|
36
|
+
self.setOptions = function (options) {
|
37
|
+
this.settings = $.extend(true, {}, defaults, options);
|
38
|
+
var settings = this.settings,
|
39
|
+
start = settings.start,
|
40
|
+
end = settings.end;
|
41
|
+
|
42
|
+
$element.css({marginTop: '0px', marginLeft: '0px', position: 'fixed'}).appendTo('body');
|
43
|
+
// 运动过程中有改变大小
|
44
|
+
if (end.width != null && end.height != null) {
|
45
|
+
$.extend(true, start, {
|
46
|
+
width: $element.width(),
|
47
|
+
height: $element.height()
|
48
|
+
});
|
49
|
+
}
|
50
|
+
// 运动轨迹最高点top值
|
51
|
+
var vertex_top = Math.min(start.top, end.top) - Math.abs(start.left - end.left) / 3;
|
52
|
+
if (vertex_top < settings.vertex_Rtop) {
|
53
|
+
// 可能出现起点或者终点就是运动曲线顶点的情况
|
54
|
+
vertex_top = Math.min(settings.vertex_Rtop, Math.min(start.top, end.top));
|
55
|
+
}
|
56
|
+
|
57
|
+
/**
|
58
|
+
* ======================================================
|
59
|
+
* 运动轨迹在页面中的top值可以抽象成函数 y = a * x*x + b;
|
60
|
+
* a = curvature
|
61
|
+
* b = vertex_top
|
62
|
+
* ======================================================
|
63
|
+
*/
|
64
|
+
|
65
|
+
var distance = Math.sqrt(Math.pow(start.top - end.top, 2) + Math.pow(start.left - end.left, 2)),
|
66
|
+
// 元素移动次数
|
67
|
+
steps = Math.ceil(Math.min(Math.max(Math.log(distance) / 0.05 - 75, 30), 100) / settings.speed),
|
68
|
+
ratio = start.top == vertex_top ? 0 : -Math.sqrt((end.top - vertex_top) / (start.top - vertex_top)),
|
69
|
+
vertex_left = (ratio * start.left - end.left) / (ratio - 1),
|
70
|
+
// 特殊情况,出现顶点left==终点left,将曲率设置为0,做直线运动。
|
71
|
+
curvature = end.left == vertex_left ? 0 : (end.top - vertex_top) / Math.pow(end.left - vertex_left, 2);
|
72
|
+
|
73
|
+
$.extend(true, settings, {
|
74
|
+
count: -1, // 每次重置为-1
|
75
|
+
steps: steps,
|
76
|
+
vertex_left: vertex_left,
|
77
|
+
vertex_top: vertex_top,
|
78
|
+
curvature: curvature
|
79
|
+
});
|
80
|
+
};
|
81
|
+
|
82
|
+
/**
|
83
|
+
* 开始运动,可自己调用
|
84
|
+
*/
|
85
|
+
self.play = function () {
|
86
|
+
this.move();
|
87
|
+
};
|
88
|
+
|
89
|
+
/**
|
90
|
+
* 按step运动
|
91
|
+
*/
|
92
|
+
self.move = function () {
|
93
|
+
var settings = this.settings,
|
94
|
+
start = settings.start,
|
95
|
+
count = settings.count,
|
96
|
+
steps = settings.steps,
|
97
|
+
end = settings.end;
|
98
|
+
// 计算left top值
|
99
|
+
var left = start.left + (end.left - start.left) * count / steps,
|
100
|
+
top = settings.curvature == 0 ? start.top + (end.top - start.top) * count / steps : settings.curvature * Math.pow(left - settings.vertex_left, 2) + settings.vertex_top;
|
101
|
+
// 运动过程中有改变大小
|
102
|
+
if (end.width != null && end.height != null) {
|
103
|
+
var i = steps / 2,
|
104
|
+
width = end.width - (end.width - start.width) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2),
|
105
|
+
height = end.height - (end.height - start.height) * Math.cos(count < i ? 0 : (count - i) / (steps - i) * Math.PI / 2);
|
106
|
+
$element.css({width: width + "px", height: height + "px", "font-size": Math.min(width, height) + "px"});
|
107
|
+
}
|
108
|
+
$element.css({
|
109
|
+
left: left + "px",
|
110
|
+
top: top + "px"
|
111
|
+
});
|
112
|
+
settings.count++;
|
113
|
+
// 定时任务
|
114
|
+
var time = window.requestAnimationFrame($.proxy(this.move, this));
|
115
|
+
if (count == steps) {
|
116
|
+
window.cancelAnimationFrame(time);
|
117
|
+
// fire callback
|
118
|
+
settings.onEnd.apply(this);
|
119
|
+
}
|
120
|
+
};
|
121
|
+
|
122
|
+
/**
|
123
|
+
* 销毁
|
124
|
+
*/
|
125
|
+
self.destroy = function(){
|
126
|
+
$element.remove();
|
127
|
+
};
|
128
|
+
|
129
|
+
self.init(options);
|
130
|
+
};
|
131
|
+
|
132
|
+
// add the plugin to the jQuery.fn object
|
133
|
+
$.fn.fly = function (options) {
|
134
|
+
return this.each(function () {
|
135
|
+
if (undefined == $(this).data('fly')) {
|
136
|
+
$(this).data('fly', new $.fly(this, options));
|
137
|
+
}
|
138
|
+
});
|
139
|
+
};
|
140
|
+
})(window.jQuery||window.Zepto);
|
@@ -0,0 +1,27 @@
|
|
1
|
+
(function () {
|
2
|
+
var lastTime = 0;
|
3
|
+
var vendors = ['webkit', 'moz'];
|
4
|
+
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
5
|
+
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
6
|
+
window.cancelAnimationFrame =
|
7
|
+
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
|
8
|
+
}
|
9
|
+
|
10
|
+
if (!window.requestAnimationFrame){
|
11
|
+
window.requestAnimationFrame = function (callback, element) {
|
12
|
+
var currTime = new Date().getTime();
|
13
|
+
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
14
|
+
var id = window.setTimeout(function () {
|
15
|
+
callback(currTime + timeToCall);
|
16
|
+
},
|
17
|
+
timeToCall);
|
18
|
+
lastTime = currTime + timeToCall;
|
19
|
+
return id;
|
20
|
+
};
|
21
|
+
}
|
22
|
+
if (!window.cancelAnimationFrame){
|
23
|
+
window.cancelAnimationFrame = function (id) {
|
24
|
+
clearTimeout(id);
|
25
|
+
};
|
26
|
+
}
|
27
|
+
}());
|
metadata
ADDED
@@ -0,0 +1,52 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: jquery-fly-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- wuyuedong
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2016-07-22 00:00:00.000000000 Z
|
12
|
+
dependencies: []
|
13
|
+
description: Add to cart - animation effect
|
14
|
+
email:
|
15
|
+
- guochunzhong@bayekeji.com
|
16
|
+
- hzxs1990225@163.com
|
17
|
+
executables: []
|
18
|
+
extensions: []
|
19
|
+
extra_rdoc_files: []
|
20
|
+
files:
|
21
|
+
- ".gitignore"
|
22
|
+
- LICENSE
|
23
|
+
- README.md
|
24
|
+
- lib/jquery-fly-rails.rb
|
25
|
+
- lib/jquery-fly-rails/version.rb
|
26
|
+
- vendor/assets/javascripts/jquery-fly.js
|
27
|
+
- vendor/assets/javascripts/requestAnimationFrame.js
|
28
|
+
homepage: https://github.com/bayetech/jquery-fly-rails
|
29
|
+
licenses:
|
30
|
+
- MIT
|
31
|
+
metadata: {}
|
32
|
+
post_install_message:
|
33
|
+
rdoc_options: []
|
34
|
+
require_paths:
|
35
|
+
- lib
|
36
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
42
|
+
requirements:
|
43
|
+
- - ">="
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: '0'
|
46
|
+
requirements: []
|
47
|
+
rubyforge_project:
|
48
|
+
rubygems_version: 2.6.4
|
49
|
+
signing_key:
|
50
|
+
specification_version: 4
|
51
|
+
summary: Add to cart - animation effect
|
52
|
+
test_files: []
|