> 웹 프론트엔드 > JS 튜토리얼 > jquery 기반 플로팅 박스(확장성 좋음)_jquery

jquery 기반 플로팅 박스(확장성 좋음)_jquery

WBOY
풀어 주다: 2016-05-16 18:20:37
원래의
936명이 탐색했습니다.
复代码码 代码如下:



<머리>

<제목>


<본문>

지금 此添加内容








复代码


代码如下:

(function($) {
$.fn.scrollBox = function(options){
var defaultOptions = {
속도: 0.1, //加速
시간: 16, //移动速degree
top: 200, //默认顶부분
align: 'right', //浮动位置,可选左、右
mix: 0 //边距
}; 🎜>var options = $.extend(defaultOptions, options);
this.each(function(){
var obj = $(this);
init();
function init() {
obj.css('display', 'block');
obj.css('position', 'absolute')
obj.css(options.align, options.mix); 🎜>obj.css('top', options.top 'px');
obj.css('z-index', '99')
move()
} function back() {
가속 = options.speed;
var x1 = 0
var x2 = 0; var y2 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0; if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0
} var x = Math.max(x1) , x2);
var y = Math.max(y1, y2);
var 속도 = 가속도
return {
l: x,
t: y,
s : 속도
};
};

function move(){
vartip = obj;
var old = options.top;
var pos = back().t;
pos = pos - $(tip).Coordinate().y options.top;
pos = $(tip).Coordinate().y pos / 10;
if (pos < options.top) {
pos = options.top;
}
if (pos != old) {
tip.css('top',pos "px");
}
오래된 = pos;
window.setTimeout(function(){move();}, options.time);
};
});
};
$.fn.Coordinate = function(){
var E = $(this)[0];
var C = E.offsetTop;
var B = E.offsetLeft;
var A = E.offsetWidth;
var D = E.offsetHeight;
while (E = E.offsetParent) {
C = E.offsetTop;
B = E.offsetLeft;
}
return {
x: B,
y: C,
w: A,
h: D
};
};
})(jQuery);

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿