基于jquery创建的一个图片、视频缓冲的效果样式插件

您现在的位置：万象互联帮助中心>> 最新资讯>>详细内容

<<返回上一页

基于jquery创建的一个图片、视频缓冲的效果样式插件: 大中小文章来源：万象互联更新时间：2012-8-30

分享到：

 利用css和jquery创建一个动画效果的缓冲样式插件，插件可以开始、暂停、结束 代码如下: (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); 调用方法: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="scroll-wait-jquery-plugin.css"> </head> <script type="text/javascript" src="jquery-1.7.js"></script> <script type="text/javascript" src="scroll-wait-jquery-plugin.js"></script> <script type="text/javascript"> $(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> <body> </body> </html> css: 代码如下: .innerCircle { position: absolute; background: #FFFF00; opacity: 0.8; } .innerCircle-change { background: #333; position: absolute; } 

分享到：复制地址新浪微博腾讯微博 QQ空间开心网人人网百度空间百度贴吧网易微博搜狐微博

上一篇：javascript 判断中文字符长度的函数代码

下一篇：xml转json的js代码

广告联盟中的CPA、CPS、CPC、CPM分别是什么意思