jquery-fly-rails 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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: []
|