跟隨頁面position漂亮效果浮動插件
/**
* 浮動(預設右上 top:150)
* @example $("#id").Float();
* @param {topSide:150,floatRight:0|1,side:5,close:ID}
*/
$.fn.Float = function(obj){
var that = this;
var lock = {
topSide : 150,
floatRight :1,
side : 5, //margin
init : function(){
var el = that, ua = navigator.userAgent;
el.css({
'position':'absolute',
'z-index':'1000',
'top': this.topSide
});
if (ua.toLowerCase().indexOf('360se') > -1) {
this.isBlock = true;
} else if (ua.toLowerCase().indexOf("theworld") > 0) {
this.isBlock = true;
} else if (ua.toLowerCase().indexOf("msie 7") > 0) {
this.side = -1;
}
this.floatRight == 1 ? el.css('right',this.side) : el.css('left',this.side);
var locker = this;
setInterval(function () {
locker.lock.call(locker);
}, 20);
if(this.close != undefined){
this.closeFloat();
}
if (this.floatRight == 1) {
$(window).resize(function () {
$(this).scrollLeft(0);
el.css('right', 5);
});
}
},
lockTop : function (el, position, page, scroll, icon){
var top = el.css('top');
var y = scroll.top + icon.topSide,
offsetTop = (y - parseInt(top)) / 20;
if (this.isBlock) {
offsetTop = (y - parseInt(top));
}
var topSide = parseInt(top) + offsetTop;
if ((topSide + position.height) < page.height) {
el.css('top',topSide );
}
},
lockLeft : function (el, scroll, icon) {
var left = el.css('left');
var x = scroll.left + icon.side,
offsetLeft = (x - parseInt(left)) / 20;
el.css('left',parseInt(left) + offsetLeft);
},
lockRight : function (el, scroll, icon) {
var right = el.css('right');
var d = document;
if (scroll.left == 0) {
var x = icon.side,
offsetRight = (Math.abs(x) - Math.abs(parseInt(right))) / 20;
el.css('right',Math.abs(parseInt(right)) + offsetRight);
} else {
var x = scroll.left - icon.side,
offsetRight = (Math.abs(x) - Math.abs(parseInt(right))) / 20;
right = -(Math.abs(parseInt(right)) + offsetRight) + "px";
el.css('right',right);
}
},
lock : function(){
var el = that,
position = this.currentPosition(el),
win = this.windowDimension(),
scroll = this.scrollPosition(),
page = this.pageDimension(),
icon = this;
this.lockTop(el, position, page, scroll, icon);
if (this.floatRight == 1) {
this.lockRight(el, scroll, icon);
} else {
this.lockLeft(el, scroll, icon);
}
if (this.isBlock) {
if (this.lastTop != el.css('top')) {
el.css('visibility',"hidden");
this.lastTop = el.css('top');
} else {
el.css('visibility',"visible");
}
}
},
currentPosition: function (el) {
var offset = el.offset();
return {
// top: offset.top,
// left: offset.left,
width: el.outerWidth(),
height: el.outerHeight()
};
},
windowDimension: function () {
if ((typeof innerWidth != "undefined" && innerWidth != 0) && (typeof innerHeight != "undefined" && innerHeight != 0)) {
return {
width: innerWidth,
height: innerHeight
};
}
var d = document;
return {
width: Math.min(d.body.clientWidth, d.documentElement.clientWidth),
height: Math.min(d.body.clientHeight, d.documentElement.clientHeight)
};
},
scrollPosition: function () {
var d = document;
return {
top: Math.max(d.body.scrollTop, d.documentElement.scrollTop),
left: Math.max(d.body.scrollLeft, d.documentElement.scrollLeft)
};
},
pageDimension: function () {
var d = document;
return {
width: Math.max(d.body.scrollWidth, d.documentElement.scrollWidth),
height: Math.max(d.body.scrollHeight, d.documentElement.scrollHeight)
};
},
closeFloat : function(){
that.find('#'+this.close).click(function(){
that.hide();
}).css('cursor','pointer');
}
};
if (obj) $.extend(lock, obj);
lock.init();
};
* 浮動(預設右上 top:150)
* @example $("#id").Float();
* @param {topSide:150,floatRight:0|1,side:5,close:ID}
*/
$.fn.Float = function(obj){
var that = this;
var lock = {
topSide : 150,
floatRight :1,
side : 5, //margin
init : function(){
var el = that, ua = navigator.userAgent;
el.css({
'position':'absolute',
'z-index':'1000',
'top': this.topSide
});
if (ua.toLowerCase().indexOf('360se') > -1) {
this.isBlock = true;
} else if (ua.toLowerCase().indexOf("theworld") > 0) {
this.isBlock = true;
} else if (ua.toLowerCase().indexOf("msie 7") > 0) {
this.side = -1;
}
this.floatRight == 1 ? el.css('right',this.side) : el.css('left',this.side);
var locker = this;
setInterval(function () {
locker.lock.call(locker);
}, 20);
if(this.close != undefined){
this.closeFloat();
}
if (this.floatRight == 1) {
$(window).resize(function () {
$(this).scrollLeft(0);
el.css('right', 5);
});
}
},
lockTop : function (el, position, page, scroll, icon){
var top = el.css('top');
var y = scroll.top + icon.topSide,
offsetTop = (y - parseInt(top)) / 20;
if (this.isBlock) {
offsetTop = (y - parseInt(top));
}
var topSide = parseInt(top) + offsetTop;
if ((topSide + position.height) < page.height) {
el.css('top',topSide );
}
},
lockLeft : function (el, scroll, icon) {
var left = el.css('left');
var x = scroll.left + icon.side,
offsetLeft = (x - parseInt(left)) / 20;
el.css('left',parseInt(left) + offsetLeft);
},
lockRight : function (el, scroll, icon) {
var right = el.css('right');
var d = document;
if (scroll.left == 0) {
var x = icon.side,
offsetRight = (Math.abs(x) - Math.abs(parseInt(right))) / 20;
el.css('right',Math.abs(parseInt(right)) + offsetRight);
} else {
var x = scroll.left - icon.side,
offsetRight = (Math.abs(x) - Math.abs(parseInt(right))) / 20;
right = -(Math.abs(parseInt(right)) + offsetRight) + "px";
el.css('right',right);
}
},
lock : function(){
var el = that,
position = this.currentPosition(el),
win = this.windowDimension(),
scroll = this.scrollPosition(),
page = this.pageDimension(),
icon = this;
this.lockTop(el, position, page, scroll, icon);
if (this.floatRight == 1) {
this.lockRight(el, scroll, icon);
} else {
this.lockLeft(el, scroll, icon);
}
if (this.isBlock) {
if (this.lastTop != el.css('top')) {
el.css('visibility',"hidden");
this.lastTop = el.css('top');
} else {
el.css('visibility',"visible");
}
}
},
currentPosition: function (el) {
var offset = el.offset();
return {
// top: offset.top,
// left: offset.left,
width: el.outerWidth(),
height: el.outerHeight()
};
},
windowDimension: function () {
if ((typeof innerWidth != "undefined" && innerWidth != 0) && (typeof innerHeight != "undefined" && innerHeight != 0)) {
return {
width: innerWidth,
height: innerHeight
};
}
var d = document;
return {
width: Math.min(d.body.clientWidth, d.documentElement.clientWidth),
height: Math.min(d.body.clientHeight, d.documentElement.clientHeight)
};
},
scrollPosition: function () {
var d = document;
return {
top: Math.max(d.body.scrollTop, d.documentElement.scrollTop),
left: Math.max(d.body.scrollLeft, d.documentElement.scrollLeft)
};
},
pageDimension: function () {
var d = document;
return {
width: Math.max(d.body.scrollWidth, d.documentElement.scrollWidth),
height: Math.max(d.body.scrollHeight, d.documentElement.scrollHeight)
};
},
closeFloat : function(){
that.find('#'+this.close).click(function(){
that.hide();
}).css('cursor','pointer');
}
};
if (obj) $.extend(lock, obj);
lock.init();
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.