如题,为了仿照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
提交
取消