如题,为了仿照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;
}
3 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
你想要的效果不是在给scrollTop赋值之后还可以通过滚动去给scrollTop变成一个变量么?window.addEventListener('scroll',function(){console.log('滚动了') // 这里可以将scrollTop重新进行处理啊});
犯罪嫌疑人X
TA贡献2080条经验 获得超4个赞
具体解答方法:
贴上代码
var a = document.getElementsByClassName('main-guild-inner-list');
var i = 0;
for (i = 0; i < a.length; i++) {
a[i].style.backgroundColor = 'red';
a[i].onmouseover = function () {
startMove3(this);
}
a[i].onmouseout = function() {
clearInterval(this.timer)
}
}
//获取目标元素到顶部的高度
function getElementToPageTop(el) {
if (el.parentElement) {
return this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
}
function startMove3(obj, fn) {
//获取当前的位置
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('main-banner-inner-lists1'));
} else if (obj == a[1]) {
iTargetNeeds = getElementToPageTop(document.getElementById('main-banner-inner-lists2'));
} else if (obj == a[2]) {
iTargetNeeds = getElementToPageTop(document.getElementById('main-banner-inner-lists3'));
} else {
iTargetNeeds = document.documentElement.offsetHeight;
}
//需要被卷走的距离
iTarget = iTargetNeeds - oMargin;
//计算速度
var iSpeed = (iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//检测停止
if (iTarget != 0) {
bStop = false;
}
document.documentElement.scrollTop += iSpeed; //执行一次以后成为固定值,这里怎么使其能够改变,
if (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30)
}添加回答
举报
0/150
提交
取消
