发新贴  快速回复

类似时间轴，实现鼠标滚动时 右侧导航相对应点亮

  远方的远方
2013-12-15 22:21
当滚动到第一个div时，对应导航第一个li被点亮，以此类推。希望高手能给予解答，代码如下。非常感谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    *{padding:0; margin:0;}
    #main{width:980px; margin:0 auto; position:relative;}
    #rightNav{position:fixed; top:150px; right:20px;}
    #rightNav ul li{list-style:none;}
    #rightNav li a{width:20px;height:20px;display:inline-block;background:#843303; margin-top:10px;}
    #rightNav li a:hover{background:red;}
    .title{height:200px;border:1px solid pink; margin:40px auto;}
    #rightNav .active a{background:red;}
</style>
<title></title>
</head>
<body>
    <div id="main">
        <div id="rightNav">
            <ul>
                <li class="active"><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        
        <div class="title">111</div>
        <div class="title">222</div>
        <div class="title">333</div>
        <div class="title">444</div>
        <div class="title">555</div>
        <div class="title">666</div>
        <div class="title">777</div>
        <div class="title">888</div>
        <div class="title">999</div>
    </div>
</body>
</html>
 
leo
简单的写了一下原理：



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
*{padding:0; margin:0;}
#main{width:980px; margin:0 auto; position:relative;}
#rightNav{position:fixed; top:150px; right:20px;}
#rightNav ul li{list-style:none;}
#rightNav li a{width:20px;height:20px;display:inline-block;background:#843303; margin-top:10px;}
#rightNav li a:hover{background:red;}
.title{height:200px;border:1px solid pink; margin:40px auto;}
#rightNav .active a{background:red;}
</style>
<body>

<div id="main">
<div id="rightNav">
<ul>
<li class="active"><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
</ul>
</div>

<div class="title">111</div>
<div class="title">222</div>
<div class="title">333</div>
<div class="title">444</div>
<div class="title">555</div>
<div class="title">666</div>
<div class="title">777</div>
<div class="title">888</div>
<div class="title">999</div>
</div>

<script>

var oDiv = document.getElementById('main');
var aDiv = oDiv.children;
var oUl = document.getElementById('rightNav');
var aLi = oUl.getElementsByTagName('li');
var arrTop = [];
var oldLi = aLi[0];

for ( var i=1; i<aDiv.length; i++ ) {
arrTop.push( getPos(aDiv[i]).top );
}

for ( var i=0; i<aLi.length; i++ ) {
aLi[i].onclick = function (index){
return function () {
oldLi.className = '';
aLi[index].className = 'active';
oldLi = aLi[index];
doMove( arrTop[index] );
};
}(i);
}

function getPos(obj) {
var pos = {left:0,top:0};
while(obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}

function doMove ( target ) {
var n = 30;
var iH = document.body.scrollTop || document.documentElement.scrollTop;
n = iH < target ? n : -n;

clearInterval( document.timer );

document.timer = setInterval(function () {
var iH = document.body.scrollTop || document.documentElement.scrollTop;

var speed = iH + n;

if ( speed > target && n > 0 || speed < target && n < 0 ) speed = target;

document.body.scrollTop = speed;
document.documentElement.scrollTop = speed;

if ( speed == target ) {
clearInterval( document.timer );
}

}, 20);
}

</script>
</body>
</html>
2013-12-16 17:27  回复本帖
 
leo
据说功能又添加了，就是这样？



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
        *{padding:0; margin:0;}
    body { height:2400px; }
        #main{width:980px; margin:0 auto; position:relative;}
        #rightNav{position:fixed; top:150px; right:20px;}
        #rightNav ul li{list-style:none;}
        #rightNav li a{width:20px;height:20px;display:inline-block;background:#843303; margin-top:10px;}
        #rightNav li a:hover{background:red;}
        .title{height:200px;border:1px solid pink; margin:40px auto;}
        #rightNav .active a{background:red;}
</style>
<body>

<div id="main">
    <div id="rightNav">
        <ul>
            <li class="active"><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
        </ul>
    </div>
    
    <div class="title">111</div>
    <div class="title">222</div>
    <div class="title">333</div>
    <div class="title">444</div>
    <div class="title">555</div>
    <div class="title">666</div>
    <div class="title">777</div>
    <div class="title">888</div>
    <div class="title">999</div>
</div>

<script>

var oDiv = document.getElementById('main');
var aDiv = oDiv.children;
var oUl = document.getElementById('rightNav');
var aLi = oUl.getElementsByTagName('li');
var arrTop = [];

for ( var i=1; i<aDiv.length; i++ ) {
    arrTop.push( getPos(aDiv[i]).top );
}

window.onscroll = function () {
    var iH = document.body.scrollTop || document.documentElement.scrollTop;
    
    if ( iH < arrTop[0]  ) {
        fnTab ( 0 );return;
    }
    
    for ( var i=0; i<arrTop.length; i++ ) {
        if ( iH > arrTop[i] && iH < arrTop[i+1] ) {
            fnTab ( i+1 );
        }
    }
};

for ( var i=0; i<aLi.length; i++ ) {
    aLi[i].onclick = function (index){
        return function () {
            fnTab ( index );
            doMove( arrTop[index] );
        };
    }(i);
}

function fnTab ( iNow ) {
    for ( var i=0; i<aLi.length; i++ ) {
        aLi[i].className = '';
    }
    aLi[iNow].className = 'active';
}

function getPos(obj) {
    var pos = {left:0,top:0};
    while(obj) {
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return pos;
}

function doMove ( target ) {
    var n = 30;
    var iH = document.body.scrollTop || document.documentElement.scrollTop;
    n = iH < target ? n : -n;
    
    clearInterval( document.timer );
    
    document.timer = setInterval(function () {
        var iH = document.body.scrollTop || document.documentElement.scrollTop;
        
        var speed = iH + n;
        
        if ( speed > target && n > 0 || speed < target && n < 0 ) speed = target;
        
        document.body.scrollTop = speed;
        document.documentElement.scrollTop = speed;
        
        if ( speed == target ) {
            clearInterval( document.timer );
        }
        
    }, 20);
}

</script>
</body>
</html>
2013-12-16 18:12  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23015&ptid=7426
据说功能又添加了，就是这样？

老师，这有些小bug，滚动的时候点击后侧按钮后会出现问题，向上滑动也会出现点小问题
2013-12-17 11:59  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=23027&ptid=7426
老师，这有些小bug，滚动的时候点击后侧按钮后会出现问题，向上滑动也会出现点小问题 ...

是滑动时，点击后再想滑回来不能动了是吗？
定时器没做管理，今天下课后再给你写一下。

你也可以尝试在定时器开启那儿加开关修复一下~~
2013-12-17 12:03  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23028&ptid=7426
是滑动时，点击后再想滑回来不能动了是吗？
定时器没做管理，今天下课后再给你写一下。



应该不是定时器的问题，向上滚动后再点击可以动，只是再点击的时候，如果点击第二个，点亮的是第三个。点击第三个，会点亮第四个
2013-12-17 12:19  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=23029&ptid=7426
应该不是定时器的问题，向上滚动后再点击可以动，只是再点击的时候，如果点击第二个，点亮的是第三个。点 ...

呵呵，好的。下课一起修复~~
2013-12-17 12:30  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23031&ptid=7426
呵呵，好的。下课一起修复~~

我在第一个div里面加了个选项卡，选项卡里面的高度不一样的时候，鼠标滚动就会按照第一个选项卡的高度计算。就是说不选择其他的选项卡是正常的，选择选项卡第二、第三个内容的时候就会出现问题了。我在想是不是存在选项卡的时候页面不适合用时间轴这种方式。快要崩溃了。{:soso_e109:} 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
        *{padding:0; margin:0;}
        #main{width:980px; margin:0 auto; position:relative;}
        #rightNav{position:fixed; top:150px; right:20px;}
        li{list-style:none;}
        #rightNav li a{width:20px;height:20px;display:inline-block;background:#843303; margin-top:10px;}
        #rightNav li a:hover{background:red;}
        .title{height:200px;border:1px solid pink; margin:40px auto;}
        #rightNav .active a{background:red;}
        .tabUl1 li{float:left; padding:0 10px;}
        .selected1{background:red;}
        .allbox1 div{border:1px solid red; display:none; margin:40px;}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        tabs(".tabUl1", "selected1", ".allbox1");
    })
    
    function tabs(tabTit, on, tabCon) {
        $(tabCon).each(function() {
            $(this).children().eq(0).show();
        });
        $(tabTit).each(function() {
            $(this).children().eq(0).addClass(on);
        });
        $(tabTit).children().click(function() {
            $(this).addClass(on).siblings().removeClass(on);
            var index = $(tabTit).children().index(this);
            $(tabCon).children().eq(index).show().siblings().hide();
        });
    }
</script>
<body>

<div id="main">
    <div id="rightNav">
        <ul>
            <li class="active"><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
        </ul>
    </div>
    <div style="border:1px solid black;">
        <ul class="tabUl1" style="height:50px;">
            <li class="selected1"><a>最新发布</a></li>
            <li><a>常用数据</a></li>
            <li><a>付费数据</a></li>
            <li><a>我的数据</a></li>
        </ul>
        <div class="allbox1">
            <div style="height:100px;display:block;">111</div>
            <div style="height:200px;">11111</div>
            <div style="height:300px;">11111111</div>
            <div style="height:400px;">11111111</div>
        </div>
    </div>
    <div class="title">222</div>
    <div class="title">333</div>
    <div class="title">444</div>
    <div class="title">555</div>
    <div class="title">666</div>
    <div class="title">777</div>
    <div class="title">888</div>
    <div class="title">999</div>
</div>

<script>

var oDiv = document.getElementById('main');
var aDiv = oDiv.children;
var oUl = document.getElementById('rightNav');
var aLi = oUl.getElementsByTagName('li');
var arrTop = [];

for ( var i=1; i<aDiv.length; i++ ) {
        arrTop.push( getPos(aDiv[i]).top );
}

window.onscroll = function () {
        var iH = document.body.scrollTop || document.documentElement.scrollTop;
       
        if ( iH < arrTop[0]  ) {
                fnTab ( 0 );return;
        }
       
        for ( var i=0; i<arrTop.length; i++ ) {
                if ( iH > arrTop[i] && iH < arrTop[i+1] ) {
                        fnTab ( i+1 );
                }
        }
};

for ( var i=0; i<aLi.length; i++ ) {
        aLi[i].onclick = function (index){
                return function () {
                        fnTab ( index );
                        doMove( arrTop[index] );
                };
        }(i);
}

function fnTab ( iNow ) {
        for ( var i=0; i<aLi.length; i++ ) {
                aLi[i].className = '';
        }
        aLi[iNow].className = 'active';
}

function getPos(obj) {
        var pos = {left:0,top:0};
        while(obj) {
                pos.left += obj.offsetLeft;
                pos.top += obj.offsetTop;
                obj = obj.offsetParent;
        }
        return pos;
}

function doMove ( target ) {
        var n = 30;
        var iH = document.body.scrollTop || document.documentElement.scrollTop;
        n = iH < target ? n : -n;
       
        clearInterval( document.timer );
       
        document.timer = setInterval(function () {
                var iH = document.body.scrollTop || document.documentElement.scrollTop;
               
                var speed = iH + n;
               
                if ( speed > target && n > 0 || speed < target && n < 0 ) speed = target;
               
                document.body.scrollTop = speed;
                document.documentElement.scrollTop = speed;
               
                if ( speed == target ) {
                        clearInterval( document.timer );
                }
               
        }, 20);
}
</script>
</body>
</html>
2013-12-17 14:36  回复本帖
 
远方的远方
选项卡我设置一样的高度了，就不去管了，主要就是向上滚动后，再点击的时候，如果点击第二个，点亮的是第三个。点击第三个，会点亮第四个
2013-12-18 10:35  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23031&ptid=7426
呵呵，好的。下课一起修复~~

{:soso_e149:}{:soso_e154:}  没有给修复。。。（关于下面我提到的选项卡，这个 不用管了）
2013-12-19 12:14  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=23083&ptid=7426
没有给修复。。。（关于下面我提到的选项卡，这个 不用管了） ...

最近的确有些忙了，不过这事一直记得，看看这周内能否找时间解决~~
2013-12-19 13:01  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23084&ptid=7426
最近的确有些忙了，不过这事一直记得，看看这周内能否找时间解决~~

{:soso_e128:} 感激不尽，你先忙你的。
2013-12-19 13:04  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=23085&ptid=7426
感激不尽，你先忙你的。

修复一些小问题：



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
        *{padding:0; margin:0;}
    body { height:2600px; }
        #main{width:980px; margin:0 auto; position:relative;}
        #rightNav{position:fixed; top:150px; right:20px;}
        #rightNav ul li{list-style:none;}
        #rightNav li a{width:20px;height:20px;display:inline-block;background:#843303; margin-top:10px;}
        #rightNav li a:hover{background:red;}
        .title{height:200px;border:1px solid pink; margin:40px auto;}
        #rightNav .active a{background:red;}
</style>
<body>

<div id="main">
    <div id="rightNav">
        <ul>
            <li class="active"><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
        </ul>
    </div>
    
    <div class="title">111</div>
    <div class="title">222</div>
    <div class="title">333</div>
    <div class="title">444</div>
    <div class="title">555</div>
    <div class="title">666</div>
    <div class="title">777</div>
    <div class="title">888</div>
    <div class="title">999</div>
</div>

<script>

var oDiv = document.getElementById('main');
var aDiv = oDiv.children;
var oUl = document.getElementById('rightNav');
var aLi = oUl.getElementsByTagName('li');
var arrTop = [];

for ( var i=1; i<aDiv.length; i++ ) {
    arrTop.push( getPos(aDiv[i]).top);
}

function getIndex(arr, v) {
    for (var i=0; i<arr.length; i++) {
        if (arr[i] >= v) {
            return i;
        }
    }
    return arr.length-1;
}

window.onscroll = function () {
    var iH = document.body.scrollTop || document.documentElement.scrollTop;
    
    var n = getIndex(arrTop, iH);
    fnTab( n );
};

for ( var i=0; i<aLi.length; i++ ) {
    aLi[i].onclick = function (index){
        return function () {
            doMove( arrTop[index] );
        };
    }(i);
}

function fnTab ( iNow ) {
    for ( var i=0; i<aLi.length; i++ ) {
        aLi[i].className = '';
    }
    aLi[iNow].className = 'active';
}

function getPos(obj) {
    var pos = {left:0,top:0};
    while(obj) {
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return pos;
}

function doMove ( target ) {
    var iH = document.body.scrollTop || document.documentElement.scrollTop;
    var speed = 30;
    if (iH > target) {
        speed = -speed;
    }
    
    clearInterval( document.timer );
    
    document.timer = setInterval(function () {
        var iH = document.body.scrollTop || document.documentElement.scrollTop;
        
        var v = iH + speed;

        if ( speed > 0 && v >= target || speed < 0 && v <= target ) {
            clearInterval( document.timer );
            v = target;
        }
        
        document.documentElement.scrollTop = document.body.scrollTop = v;
        
    }, 20);
}

</script>
</body>
</html>
2013-12-22 09:55  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23163&ptid=7426
修复一些小问题：

嗯嗯，这次没问题了。{:soso_e121:} {:soso_e121:} {:soso_e121:} ，谢谢LEO.真是帮了我的大忙了。{:soso_e183:} 
2013-12-22 11:52  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23163&ptid=7426
修复一些小问题：

点击最后一个导航按钮后，再往上滚动就滚不上去了，但是再点击一下其他按钮，就可以正常滚动了。谷歌跟IE都存在这个问题。
2013-12-23 18:10  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=23198&ptid=7426
点击最后一个导航按钮后，再往上滚动就滚不上去了，但是再点击一下其他按钮，就可以正常滚动了。谷歌跟IE ...

为什么我的火狐和谷歌浏览器都没你所说的问题？
2013-12-23 22:56  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23205&ptid=7426
为什么我的火狐和谷歌浏览器都没你所说的问题？

是点击最后一个导航按钮，然后会划到最下面，再往上滚动就滚不上去了，必须点击其他的导航按钮才能滚动。谷歌是出现这种问题，IE9，10也有这种情况
2013-12-24 11:12  回复本帖
 
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=23216&ptid=7426
是点击最后一个导航按钮，然后会划到最下面，再往上滚动就滚不上去了，必须点击其他的导航按钮才能滚动。 ...

测试多次，并无你说的那样。
2013-12-24 15:48  回复本帖
 
远方的远方
forum.php?mod=redirect&goto=findpost&pid=23219&ptid=7426
测试多次，并无你说的那样。

{:soso_e127:} 为什么我一试就有问题呢？郁闷。是点击 右侧 最后一个 红色 导航，然后再滑动鼠标往上滚，滚不上去。你用谷歌试试
2013-12-24 18:03  回复本帖
 
创美易-miaov
好吧，我错了，我不该多嘴。
2013-12-24 19:33  回复本帖
妙味用户611183

远方的远方 2013-12-22 11:52发表的内容:

forum.php?mod=redirect&goto=findpost&pid=23163&ptid=7426
修复一些小问题：

嗯嗯，这次没问题了。{:soso_e121:} {:soso_e121:} {:soso_e121:} ，谢谢LEO.真是帮了我的大忙了。{:soso_e183:} 
这个不是可以直接用swiper???对应的内容和分页器点击滑动的都有效果
2018-06-16 16:52  回复本帖
登录 后才可以发表回复
我也来回答
 换一换 
 

京ICP备08102442号-1 2007-2018 MIAOV.COM 版权所有