标签：
jquery实现图片和视频缓冲效果插件:
创建一个动画效果的缓冲样式插件，插件可以开始、暂停、结束等功能，代码来源于网络希望对网络有所帮助。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> .innerCircle { position:absolute; background:#FFFF00; opacity:0.8; } .innerCircle-change { background:#333; position:absolute; } </style> <script type="text/javascript"> (function($){ $.fn.scrollWait=function(options){ var ops=$.extend({},$.fn.scrollWait.defaults,options); var opts=$.meta?$.extend({},ops,$(this).data()):ops; /** * 显示位置 */ var win=$(window); var winheight=win.height(); var winwidth=win.width(); var dsize=opts.size; var top=opts.top; var left=opts.left; var dtop=!top&&top!=""&&typeof top != "undefined" && top != 0?(winheight - dsize)/2:top; var dleft=!left&&left!=""&&typeof left != "undefined"&&left != 0 ? (winwidth - dsize) / 2 : left; // 原点数量 var num=opts.num; // 原点直径 var R=dsize/num * opts.areaWeight; // 半径 var r = 1 / 2 * R; // 外侧圆直径 var outerR = 1 / 2 * dsize; // 内侧圆直径 var innerR = outerR - R; // 遍历添加原点对象 for (var i = 0; i < num; i++) { $(‘body‘).append($("<div class=\"innerCircle\" id=\"innerCircle" + i + "\"></div>")); } // 其实坐标0,0 var i = 0; var innerArray = new Array(num); /** * 计算内圆上个点的中心坐标 */ for (var j = 0; j < innerArray.length; j++) { var x, y; var ang = i * 360 / num; if(0 <= ang && ang <= 90) { x = outerR * Math.sin(ang / 180 * Math.PI) + outerR; y = outerR - outerR * Math.cos(ang / 180 * Math.PI); } if(90 < ang && ang <= 180) { x = outerR * Math.cos((ang - 90) / 180 * Math.PI) + outerR; y = outerR * Math.sin((ang - 90) / 180 * Math.PI) + outerR; } if(180 < ang && ang <= 270) { x = outerR - outerR * Math.sin((ang - 180) / 180 * Math.PI); y = outerR * Math.cos((ang - 180) / 180 * Math.PI) + outerR; } if(270 < ang && ang <= 360) { x = outerR - outerR * Math.cos((ang - 270) / 180 * Math.PI); y = outerR - outerR * Math.sin((ang - 270) / 180 * Math.PI); } innerArray[j] = new Array(dtop + y - r, dleft + x - r); i++; } /** * 画圆 */ $(".innerCircle").each(function(){ $(this).css({ ‘width‘ : R + "px", ‘height‘ : R + "px", ‘border-top-left-radius‘ : r + "px", ‘border-top-right-radius‘ : r + "px", ‘border-bottom-left-radius‘ : r + "px", ‘border-bottom-right-radius‘ : r + "px" }); }); for (var i = 0; i < num; i++) { $("#innerCircle" + i).css({ ‘top‘ : innerArray[i][0] + "px", ‘left‘ : innerArray[i][1] + "px" }); } // 查找当前暂停的圆的位置 var val = $("#current").val(); if(val == undefined || val == "") { $("body").append($("<input type=\"hidden\" id=\"current\">")); k = 0; } else { k = val; } var o = new Object(); var timer; // 开始旋转 o.start=function() { var first; var g = $("#grade").val(); if (g == undefined || g == "") { $("body").append($("<input type=\"hidden\" id=\"grade\">")); first = 1; } else { first = g; } timer = setInterval(function() { if(first % 2 == 1) { $("#innerCircle" + k).removeClass("innerCircle").addClass("innerCircle-change"); } if (first % 2 == 0) { $("#innerCircle" + k).removeClass("innerCircle-change").addClass("innerCircle"); } if (k == (num - 1)) { k = 0; console.log(first); first++; $("#grade").val(first); } else { k++; } // 覆盖值 $("#current").val(k); }, opts.speed); return this; } // 暂停 o.stop = function() { clearInterval(timer); return this; } // 结束 o.end = function() { clearInterval(timer); // 移除所有元素 $(".innerCircle,.innerCircle-change,#current,#grade").remove(); } return o; } $.fn.scrollWait.defaults={ size : 80, top : null, left : null, // 数量 num : 8, speed : 200, // 圆点占整个面积的比重 areaWeight : 5 / 4 }; })(jQuery); $(document).ready(function(){ var w=$("body").scrollWait(); w.start(); setTimeout(function() {w.stop();},1000); setTimeout(function() {w.start();},2000); setTimeout(function() {w.stop();},3000); setTimeout(function() {w.start();},4000); setTimeout(function() {w.stop();},5000); setTimeout(function() {w.start();},6000); setTimeout(function() {w.end();},7000); }); </script> </head> <body> </body> </html>
原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4060.html
最为原始的地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8409
标签：
原文地址：http://www.cnblogs.com/come-on/p/4725881.html
