本文是一篇关于效果设置的帖子
其实写一个回到顶部的浮窗也就100多行代码(包含空行)。写浮窗效果有三个难点,一个是处理ie6下的抖动效果,因为ie6不支持position:fixed这个属性。二是要处理窗口只适应问题。三是计算位置。
对于第一个难点,上面有个链接,大家可以去看看,研究一下怎么处理http://jslover.com/?p=66。这里面讲得很清晰。一开始的时候发当初ie6下不知道为啥offset的取值始终不对,弄了许久,发现是position默认设置为fixed了,所以当前遇到jquery函数取值始终很奇异的时候,看看标签的属性是不是设置正确。还有,在非ie6的情况下,我是设置动画效果的,ie6没有动画效果。有时候可以对ie6进行一些取舍。
窗口大小的变化也是一个很蛋疼的问题,重要还是因为ie6(他nnd)。作为一个前端工程师,我们要把用户的休会做到极致,因此我们不能不考虑那些经常改变窗口大小的人。在改变窗口的大小的时候,我们须要重新计算浮窗的位置。
一下是实现的代码。
/**
*$backtop指的是浮窗的jquery对象,$background指的是你页面的背景对象,有的网站把自己的宽度设置为980,有的990等等,不过这里的代码没有考虑到宽度是全部浏览器窗口大小的情况。
*/
ticket.detail.Backtop = function($backtop, $background) {
this._$backtop = $backtop;
this._$background = $background;
this._$win = $(window);
this._isIE6 = $.browser.msie && $.browser.version < 7;
this._defaultBacktopTop = this._$win.height() + 200;
this._hasShow = false;
this.init();
};
ticket.detail.Backtop.prototype = {
init: function() {
this._setPosition();
this._attachEvents();
},
_showBacktop: function(top, left) {
var config = {};
left = left || this._$backtop.offset().left;
if (this._$background.width() > this._$win.width()) {
config.right = 1;
} else {
config.left = left;
}
if (this._isIE6) {
this._$backtop.css(config);
} else {
config.top = top;
this._$backtop.stop(true).animate(config, 'slow');
}
},
_attachEvents: function() {
this._$win.bind('scroll', $.proxy(this._handleWindowScroll, this));
this._$win.bind('resize', $.proxy(this._handleWindowResize, this));
},
_handleWindowScroll: function() {
var nowScrollTop = this._$win.scrollTop();
var btOffset = this._$backtop.offset();
var animateConfig = {};
if (this._isIE6) {
if (nowScrollTop >= 200 && !this._hasShow) {
this._$backtop.show();
this._hasShow = true;
} else if (nowScrollTop < 200 && this._hasShow) {
this._$backtop.hide();
this._hasShow = false;
}
} else {
if (btOffset.top > this._$win.height() && nowScrollTop >= 200 && !this._hasShow) {
this._showBacktop(this._$win.height() - this._$backtop.height() * 1.618);
this._hasShow = true;
} else if (nowScrollTop < 200 && this._hasShow) {
this._showBacktop(this._$win.height() + 200);
this._hasShow = false;
}
}
},
_handleWindowResize: function() {
if(this._$win.scrollTop() >= 200){
this._setLeft();
this._setTop();
}else{
this._setPosition();
}
},
_setLeft: function() {
var bgWidth = this._$background.width(),
btWidth = this._$backtop.width(),
winWidth = this._$win.width();
var offsetLeft = bgWidth + btWidth;
this._$backtop[0].style.right = null;
if (bgWidth + this._$background.offset().left + btWidth * 1.618 > winWidth) {
if (bgWidth > winWidth) {
this._$backtop[0].style.left = null;
this._$backtop.css('right', 10);
} else {
this._$backtop.css('left', this._$background.offset().left + bgWidth - btWidth);
}
} else {
this._$backtop.css('left', bgWidth + this._$background.offset().left + btWidth * 0.618);
}
},
_setTop: function() {
var scrollTop = this._$win.scrollTop();
var offsetTop = this._$win.height() - this._$backtop.height()*1.618;
if (scrollTop >= 200) {
if (this._isIE6) {
this._$backtop[0].style.setExpression('top', 'document.compatMode=="CSS1Compat"?' +
'documentElement.scrollTop+' + offsetTop + ':document.body.scrollTop+' + offsetTop);
} else {
this._showBacktop(this._$win.height() - this._$backtop.height() * 1.618);
}
}
},
_setPosition: function() {
var offsetTop = this._$win.height() - this._$backtop.height()*1.618;
if (this._isIE6) {
this._$backtop.css('position', 'absolute');
this._$backtop[0].style.setExpression('top', 'document.compatMode=="CSS1Compat"?' +
'documentElement.scrollTop+' + offsetTop + ':document.body.scrollTop+' + offsetTop);
var body = document.body;
if (body.currentStyle.backgroundImage == 'none') {
body.style.backgroundImage = window.location.protocol == 'https:' ? 'url(https:///)' : 'url(about:blank)';
body.style.backgroundAttachment = 'fixed';
}
} else {
this._$backtop.css('position', 'fixed');
this._$backtop.css('top', this._$win.height() + 200);
}
this._setLeft();
if (!this._isIE6) {
this._$backtop.show();
}
}
};
文章结束给大家分享下程序员的一些笑话语录: 这个世界上只有10种人:懂得二进制的和不懂得二进制的。