循环滚动

时间：2014-11-13 18:15:01 阅读：146 评论：0 收藏：0 [点我收藏+]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0; list-style:none;}

.focus{width:500px; height:300px; overflow:hidden; zoom:1;}
.f-l,.f-r{display:inline; height:300px; position:relative; overflow:hidden;}
.f-l{float:left; width:30px;}
.f-r{float:right; width:450px; background:#9F0;}

.f-l li,.f-r li{text-align:center;}
.f-l li{width:30px; height:100px; background:#666; line-height:100px; overflow:hidden;}
.f-l li.on{background:#06C;}
.f-r li{width:450px; height:300px; line-height:300px;}

.f-l ul,.f-r ul{position:absolute; top:0; left:0;}
</style>
</head>

<body>
<div id="focus" class="focus">
    <div class="f-l">
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    
    <div class="f-r">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</div>

<script>
function getByClass(sClass,oParent){
    if(document.getElementsByClassName){
        return (oParent || document).getElementsByClassName(sClass);
    }else{
        var aEle = (oParent || document).getElementsByTagName(‘*‘);
        var r = [];
        var reg = new RegExp(‘\\b‘+sClass+‘\\b‘,‘i‘);
        
        for(var i=0; i<aEle.length; i++){
            if(reg.test(aEle[i].className)){
                r.push(aEle[i]);
            }
        }
        
        return r;
    }
}

function getStyle(name,obj){
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name] ;
}

function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var b = true;
        for(var name in json){
            var cur = parseInt(getStyle(name,obj));
            var speed = (json[name] - cur)/5;
            speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);
                obj.style[name] = cur+speed+‘px‘;            
            if(cur != json[name]){
                b = false;
            }
        }
        if(b){
            clearInterval(obj.timer);
            fn && fn();
        }
    },30);
}

var oDiv = document.getElementById(‘focus‘);
var oUl1 = getByClass(‘f-l‘,oDiv)[0].getElementsByTagName(‘ul‘)[0];
var oUl2= getByClass(‘f-r‘,oDiv)[0].getElementsByTagName(‘ul‘)[0];
oUl2.innerHTML=oUl2.innerHTML+oUl2.innerHTML;
oUl1.innerHTML=oUl1.innerHTML+oUl1.innerHTML;
var nIndex=0;
var aLi1 = oUl1.getElementsByTagName(‘li‘);
var aLi2 = oUl2.getElementsByTagName(‘li‘);

var h = aLi1[0].offsetHeight;
var h2 = aLi2[0].offsetHeight;

for(var i=0; i<aLi1.length; i++){
    (function(i){
    aLi1[i].onclick = function(){
        nIndex=i;
        for(var j=0; j<aLi1.length; j++){
            aLi1[j].className = ‘‘;
        }
        this.className = ‘on‘;
        if(i<aLi1.length/2){
            startMove(oUl2,{top:-h2*i});
            startMove(oUl1,{top:-h*i});
        }else{
            nIndex=nIndex-aLi1.length/2;
            aLi1[nIndex].className = ‘on‘;
            startMove(oUl2,{top:-h2*i},function(){oUl2.style.top=-(i-aLi1.length/2)*h2+"px"});
            startMove(oUl1,{top:-h*i},function(){oUl1.style.top=-(i-aLi1.length/2)*h+"px",aLi1[i].className = ‘‘;});    
        }
    };
    })(i)
}

    var timer=null;
    oDiv.onmouseover=function(){
        clearInterval(timer)
    }
    oDiv.onmouseout=function(){
        timer=setInterval(function(){
            aLi1[nIndex].onclick();
            console.log(nIndex)
            nIndex++;
        },1000)
}
oDiv.onmouseout();
</script>
</body>
</html>

循环滚动

标签：style blog io color ar os sp for div

原文地址：http://www.cnblogs.com/busicu/p/4095371.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行