$(document).ready(function () {
$.plugin = {
number_plus : function (obj,set_num,speed) {
if (!speed)
speed = 60;
if (!set_num)
set_num = 50;
var scroll_lock = true;
$(window).scroll(function () {
if ($(document).scrolltop() + $(window).height() > obj.offset().top && obj.offset().top+obj.innerheight() > $(document).scrolltop() && scroll_lock) {
scroll_lock = false;
var time_lock = 0,
this = obj.find('li'), // 获取对象
num = []; // 数据容器
this.each(function () {
//数据缓存
num.push($(this).find('em').attr('data-num')*1);
});
var set_plus_num = function(index){
// 数字相加
if (this.eq(index).find('em').text()*1 > num[index]-num[index]/set_num){
this.eq(index).find('em').text(parseint(num[index]));
}else {
this.eq(index).find('em').text(parseint(num[index]/set_num + this.eq(index).find('em').text()*1));
}
//较小数字处理
if (num[index] < set_num){
this.eq(index).find('em').text(parseint(num[index]));
}
},
set_plus = setinterval(function () {
// 动画执行
for (var i=0;i<=this.length;i++){
if (num[i-1] > this.eq(i-1).find('em').text()*1) {
set_plus_num(i-1);
if (num[i-1] === this.eq(i-1).find('em').text()*1){
time_lock++;
}
}
}
if (time_lock >= num.length){
// 清理多余执行
clearinterval(set_plus);
}
},speed);
}
})
},
bg_parallax : function (obj, speed) {
if (!speed)
speed = .5;
$(window).scroll(function () {
obj.css({
'background-position-y': (((obj.offset().top + obj.innerheight()/2) - ($(document).scrolltop() + $(window).height()/2)) * speed)
})
})
},
interval_fun : function (obj,means,cycle,position) {
if (!position)
position = 2;
if (!cycle)
var cycle_num = 0;
$(window).scroll(function () {
if (obj.offset().top + obj.innerheight()/position < $(document).scrolltop()+$(window).height() && obj.offset().top + obj.innerheight()/position > $(document).scrolltop()){
cycle_num++;
if (!cycle && cycle_num <= 1)
means();
else if (cycle)
means()
}
})
},
video_open : function (obj) {
var src,btn,img,tag,method = obj.attr('data-mode');
if (obj.attr('data-src'))
src = obj.attr('data-src');
else
return;
if (obj.attr('data-img'))
img = obj.attr('data-img');
if (obj.attr('data-btn'))
btn = obj.attr('data-btn') ? obj.attr('data-btn') : '#004dda';
if (!method)
tag = '';
else
tag = '';
var video = "
"+tag+"
",
css = ""
obj.click(function () {
$("body").append(video).append(css).animate(200,function () {$(".video_box").add($(".video_mask")).removeclass('active');});
$("i.video_mask").add($("i.video_close")).one('click',function () {$(".video_box").add($("i.video_mask")).add($("#video_css")).remove();})
});
},
line_curve:function (obj,origin,coordinate,color,speed) {
if (!speed)
speed = 0.01;
if (!color)
color = '#000';
var con = document.getelementbyid(obj).appendchild(document.createelement('canvas'));
var ctx = con.getcontext('2d');
con.width = document.getelementbyid(obj).offsetwidth ? document.getelementbyid(obj).offsetwidth : window.innerwidth;
con.height = document.getelementbyid(obj).offsetheight ? document.getelementbyid(obj).offsetheight : window.innerheight;
var percent = 0;
ctx.linewidth = 2;
origin = [origin[0] * (con.width / 100),origin[1] * (con.height / 100)];
function animate() {
ctx.clearrect( 0, 0, con.width, con.height );
for ( var i = 0; i < coordinate.length; i++ ) {
var x0 = coordinate[i][0][0] * (con.width / 100);
var y0 = coordinate[i][0][1] * (con.height / 100);
var x1 = coordinate[i][1][0] * (con.width / 100);
var y1 = coordinate[i][1][1] * (con.height / 100);
ctx.strokestyle = color;
ctx.beginpath();
formula(ctx, origin, [ x0, y0 ] , [ x1, y1 ], percent);
ctx.stroke();
}
if (percent < 1)
percent += speed;
else {
return;
}
requestanimationframe( animate );
}
function formula( ctx, start, end, control, percent ) {
// 二次贝塞尔曲线坐标计算公式
var v01 = [ control[ 0 ] - start[ 0 ], control[ 1 ] - start[ 1 ] ]; // 向量
var v12 = [ end[ 0 ] - control[ 0 ], end[ 1 ] - control[ 1 ] ]; // 向量
var q0 = [ start[ 0 ] + v01[ 0 ] * percent, start[ 1 ] + v01[ 1 ] * percent ];
var q1 = [ control[ 0 ] + v12[ 0 ] * percent, control[ 1 ] + v12[ 1 ] * percent ];
var v = [ q1[ 0 ] - q0[ 0 ], q1[ 1 ] - q0[ 1 ] ]; // 向量
var b = [ q0[ 0 ] + v[ 0 ] * percent, q0[ 1 ] + v[ 1 ] * percent ];
ctx.moveto( start[ 0 ], start[ 1 ] );
ctx.quadraticcurveto(
q0[ 0 ], q0[ 1 ],
b[ 0 ], b[ 1 ]
);
}
animate();
}
};
/**
* 全局效果说明
* ---------------------dividing line--------------------
* @num_plus 数字相加
* 参数 (obj,set_num,speed = 60)
* 详解 obj
* 获取容器对象
* set_num
* 设置相加比例 公式: 数字 / set_num = 每次相加数字(整数)
* speed
* 动画速度 默认 60ms
* html 结构
*
*
* ---------------------dividing line--------------------
* @bg_parallax 背景视差
* 参数 (obj,speed = 0.5)
* 详解 obj
* 获取容器对象
* speed
* 动画速度 默认 0.5
*
* ---------------------dividing line--------------------
* @interval_fun 区间判断
* 参数 (obj,means,cycle,position)
* 详解 obj
* 获取容器对象
* means
* 执行方法
* cycle
* 是否多次执行 boolean值
* position
* 当容器自身多少出现在屏幕中时执行 公式:容器高度 / position
*
* ---------------------dividing line--------------------
* @video_open 视频弹窗
* 参数 (obj,url,btn,img)
* 详解 obj
* 获取点击对象 ( html标签 data-src="视频地址" data-img="video第一帧" data-btn="关闭按钮颜色")
* method
* 切换模式 (video / iframe) false / true
*
* ---------------------dividing line--------------------
* @line_curve 画曲线
* 参数 (obj,origin,coordinate,color,speed)
* 详解 obj
* 获取id属性
* origin
* 中心点 (数组) 百分比
* coordinate
* 其它点 (控制点+终点)
* [
* [[终点],[控制点]] 百分比
* ]
* color
* 线条颜色
* speed
* 速度
*/
})