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


Posted in Javascript onAugust 28, 2012
(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; 
}
 
Javascript 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
javascript 判断中文字符长度的函数代码
Aug 27 #Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 #Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 #Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 #Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 #Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 #Javascript
jquery动画1.加载指示器
Aug 24 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
请离开include_once和require_once
2013/07/18 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
puppeteer库入门初探
2019/01/09 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
Python变量作用范围实例分析
2015/07/07 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python三引号输出方法
2019/02/27 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python 实现集合Set的示例
2020/12/21 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
介绍一下JNDI的基本概念
2013/07/26 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
医学生求职自荐信
2013/10/25 职场文书
英语文学专业学生的自我评价
2013/10/31 职场文书
应届生自我鉴定
2013/12/11 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
行政文员岗位职责
2015/02/04 职场文书
毕业欢送会致辞
2015/07/29 职场文书