让scriptaculous的Effect.ScrollTo有横向滚动的效果

Posted by Smeagol | Posted in Uncategorized | Posted on 06-03-2010

Tagged Under : ,

用javascript如何实现滚动条横向滚动的效果?

是的,scriptaculous的Effect.ScrollTo动画只能实现纵向的效果。即用采用锚标记定位时,让跳转的过程不那么生硬,有一个动画效果,慢慢滚动过去,但是他只在页面是纵向布局的时候可行。如果页面是横向的,像gucci的网站那样,就不行了。给出下面的代码,重写Effect.ScrollTo,来实现横向滚动的效果。

Effect.ScrollTo = Class.create();
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {

initialize: function(element) {
this.element = $(element);
this.start(arguments[1] || {});
},

setup: function() {
Position.prepare();
var offsets = Position.cumulativeOffset(this.element);
if(this.options.offsetX) offsets[0] += this.options.offsetX;
if(this.options.offsetY) offsets[1] += this.options.offsetY;

var maxWidth = window.innerWidth ?
window.width – window.innerWidth :
document.body.scrollWidth -
(document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth);
this.scrollStartX = Position.deltaX;
this.deltaX = (offsets[0] > maxWidth ? maxWidth : offsets[0]) – this.scrollStartX;

var maxHeight = window.innerHeight ?
window.height – window.innerHeight :
document.body.scrollHeight -
(document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight);
this.scrollStartY = Position.deltaY;
this.deltaY = (offsets[1] > maxHeight ? maxHeight : offsets[1]) – this.scrollStartY;
},

update: function(position) {
Position.prepare();
window.scrollTo(
this.scrollStartX + (position * this.deltaX),
this.scrollStartY + (position * this.deltaY)
);
}
});
Event.observe(window, ‘load’, function() {
$$(‘a[href^=#]:not([href=#])’).each(function(element) {
element.observe(‘click’, function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})

点右键另存为hor.js

IE和FF的区别(亲测)

Posted by Smeagol | Posted in 前端技术 | Posted on 06-03-2009

Tagged Under :

js:

1、用按钮实现页面跳转的:<INPUT TYPE=”button” value=”跳转” onClick=”javascript:location.href(‘?qs=20′)”>在ff中不行,要用window.location.href=’?qs=20′

css:

1、firefox的对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,解决用!important;

2、firfox不支持hand的鼠标光标,用pointer。