基于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 相关文章推荐
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
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
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python基础知识小结之集合
2015/11/25 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
transform python环境快速配置方法
2018/09/27 Python
python+opencv实现阈值分割
2018/12/26 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python 为什么说eval要慎用
2019/03/26 Python
python字典一键多值实例代码分享
2019/06/14 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
大学自我鉴定
2013/12/20 职场文书
《将心比心》教学反思
2014/04/08 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
妇联主席先进事迹
2014/05/18 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
客户答谢会致辞
2015/07/30 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python