$(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 结构 *
    *
  • *0*
  • *
* * ---------------------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 * 速度 */ })