jquery_jquery를 기반으로 생성된 이미지 및 비디오 버퍼링을 위한 효과 스타일 플러그인

코드 복사 코드는 다음과 같습니다.

(function($) {
$.fn .scrollWait = function(options) {
var ops = $.extend({}, $.fn.scrollWait.defaults, options)
var opts = $.meta ? , $( 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 != "정의되지 않음" && top != 0
? (winheight - dsize) / 2
: top
var dleft = !left && left != "" && typeof left != " 정의되지 않음"
&& left != 0 ? (winwidth - dsize) / 2 : 왼쪽
// 원점 수
var num = opts.num
// 원점 직경;
var R = dsize / num * opts.areaWeight;
// 반경
var r = 1 / 2 * R
// 외부 원 직경
var externalR = 1 / 2 * dsize;
//내부 원 직경
var innerR = externalR - R
//원점 객체를 트래버스하고 추가
for (var i = 0; i < num; i ) {
$('body' ).append($("

i "">

"))
}
// 실제 좌표는 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 <= 90) >x = 외부R * Math.sin (ang / 180 * Math.PI) 외부R;
y = 외부R - 외부R * Math.cos(ang / 180 * Math.PI)
}
if ( 90 < ang && ang < 180) {
x = 외부R * Math.cos((ang - 90) / 180 * Math.PI) 외부R
y = 외부R * Math.sin((ang - 90) / 180 * Math.PI) externalR;
}
if (180 < ang && ang <= 270) {
x = externalR - externalR * Math.sin((ang - 180 ) / 180 * Math.PI) ;
y = externalR * Math.cos((ang - 180) / 180 * Math.PI) externalR
}
if (270 < ang && ang < ;= 360) {
x = 외부R - 외부R * Math.cos((ang - 270) / 180 * Math.PI)
y = 외부R - 외부R * Math.sin((ang - 270) / 180 * Math.PI);
innerArray[j] = new Array(dtop y - r, dleft x - r)
i
}
/**
* 원 그리기
*/
$( ".innerCircle").each(function() {
$(this).css({
'너비' : R "px",
'높이' : R "px",
'테두리 상단 왼쪽 반경' : r "px",
'테두리 상단 오른쪽 반경' : r "px",
'테두리 하단 왼쪽 -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 == 정의되지 않음 || val == "") {
$("body").append($(""))
k = 0;
} else {
k = val;
}
var o = new Object()
var 타이머
// o.start = function() {
var first;
var g = $("#grade").val()
if (g == 정의되지 않음 || g == "")
$("body") .append($(""))
first = 1
} else {
first = g;
}
timer = setInterval(function() {
if (first % 2 == 1) {
$("#innerCircle" k).removeClass("innerCircle")
.addClass("innerCircle- 변경");
}
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;
}
// Pause
o.stop = function() {
clearInterval(timer) ;
return this;
}
// End
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)


호출 방법:




코드 복사

코드는 다음과 같습니다.

<머리>




href="scroll-wait-jquery-plugin.css">




<본문>

css:

复代码 代码如下:

. innerCircle {
위치: 절대;
배경: #FFFF00;
불투명도: 0.8;
}
.innerCircle-change {
배경: #333;
위치: 절대;
}