如题,
为了仿照css3中transform 2D平移事件
<script>
var a = document.getElementsByClassName('a');
var i = 0;
for (i = 0; i < a.length; i++) {
a[i].onmouseover = function () {
startMove3(this);//注意,这里是要做一个触摸按钮然后页面移动到指定位置,其中的变量已经固定。
}
}
//获取目标元素到顶部的高度
function getElementToPageTop(el) {
if (el.parentElement) {
return this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
}
function startMove3(obj) {
//获取当前的位置
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var iCur = 0;
iCur = document.documentElement.scrollTop || document.body.scrollTop; //注意检查这里的
//*计算目标
//页面可见高
var iCurBodyHeight = document.body.clientHeight;
//盒子的总高
var mainBannerHeight = document.getElementById('main-banner').offsetHeight;
//移动图片的高,四张图片
var oHeight = mainBannerHeight / 4;
//需要居中时top
var oMargin = (iCurBodyHeight - oHeight) / 2;
//目标
var iTarget = 0;
var iTargetNeeds = 0;
//移动盒子的对应至最顶部的高
if (obj == a[0]) {
iTargetNeeds = getElementToPageTop(document.getElementById('lists1'));
} else if (obj == a[1]) {
iTargetNeeds = getElementToPageTop(document.getElementById('lists2'));
} else if (obj == a[2]) {
iTargetNeeds = getElementToPageTop(document.getElementById('lists3'));
} else {
iTargetNeeds = document.documentElement.offsetHeight;
}
//需要被卷走的距离
iTarget = iTargetNeeds - oMargin;
//计算速度
var iSpeed = (iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//检测停止
if (iCur != iTarget) {
bStop = false;
}
document.documentElement.scrollTop = iCur + iSpeed; //执行一次以后成为固定值,这里怎么使其能够改变,
if (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30)
}
</script>