基础 - 长篇图

 

 

<div id="show" class="show">
    <img src="http://ww2.sinaimg.cn/mw690/49dd64e2jw1f5fdhnnlopj20hs6sakei.jpg" alt="">
    <span class="up"></span>
    <span class="down"></span>
</div>

 

* {
    margin: 0;
    padding: 0;
}
.show {
    position: relative;
    width: 512px;
    height: 512px;
    border: 5px solid #C81623;
    margin: 100px auto;
    overflow: hidden;
}
.show img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.show span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    cursor: pointer;
}
.show span.up {
    top: 0;
}
.show span.down {
    bottom: 0;
}

 

window.onload = function () {

    var oShow = document.getElementById("show");
    var oImg = oShow.getElementsByTagName("img")[0];
    var oUp = oShow.getElementsByTagName("span")[0];
    var oDown = oShow.getElementsByTagName("span")[1];

    var nChaZhi = 0;
    var timer = null;
    oUp.onmouseover = function() {
        if (timer) clearInterval(timer);
        timer = setInterval(function(){
            if (nChaZhi>=-(7035-512)) {
                oImg.style.top = nChaZhi+"px";
            }else{
                if (timer) clearInterval(timer);
            }
            nChaZhi--;
        },1);
    }
    oDown.onmouseover = function() {
        if (timer) clearInterval(timer);
        timer = setInterval(function(){
            if (nChaZhi<=0) {
                oImg.style.top = nChaZhi+"px";
            }else{
                if (timer) clearInterval(timer);
            }
            nChaZhi++;
        },3);
    }
    oUp.onmouseout = oDown.onmouseout = function () {
        if (timer) clearInterval(timer);
    }

}