(重要)介绍一个vue项目给大家学习,阅读别人的项目可以快速提高自己哦, 移动端vue完整项目
1,这里用到了jq及基于jq的插件,插件非常的小,好像只有数kb,不用担心太多代码,不多说直接上代码,
使用前需要初始化,在mounted或者created方法里调用 this.init()
init:function(){
(function ($) {
$.fly = function (element, options) {
// 默认值
var defaults = {
version: '1.0.0',
autoPlay: true,
vertex_Rtop: 10, // 默认顶点高度top值
speed: 1.2,
start: {}, // top, left, width, height
end: {},
onEnd: $.noop
};
var self = this,
$element = $(element);
/**
* 初始化组件,new的时候即调用
*/
self.init = function (options) {
this.setOptions(options);
!!this.settings.autoPlay && this.play();
};
/**
* 设置组件参数
*/
self.setOptions = function (options) {
this.settings = $.extend(true, {}, defaults, options);
var settings = this.settings,
start = settings.start,
end = settings.end;
$element.css({marginTop: '0px', marginLeft: '0px', position: 'fixed'}).appendTo('body');
// 运动过程中有改变大小
if (end.width != null && end.height != null) {
$.extend(true, start, {
width: $element.width(),
height: $element.height()
});
}
// 运动轨迹最高点top值
var vertex_top = Math.min(start.top, end.top) - Math.abs(start.left - end.left) / 3;
if (v