基础 - 长篇图

<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);    }

}