基于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 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
轮播的简单实现方法
Jul 28 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
vue实现移动端拖动排序
Aug 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中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php中stdClass的用法分析
2015/02/27 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Python异常学习笔记
2015/02/03 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python实现list由于numpy array的转换
2018/04/04 Python
python快排算法详解
2019/03/04 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
python求前n个阶乘的和实例
2020/04/02 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
小学英语教学反思案例
2014/02/04 职场文书
学生手册评语
2014/05/05 职场文书
兵马俑的导游词
2015/02/02 职场文书
国庆庆典邀请函
2015/02/02 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript