<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>長(zhǎng)圖滾動(dòng)</title>
????<style>
????????#box?{
????????????width:?750px;
????????????height:?400px;
????????????margin:?100px?auto;
????????????border:?1px?solid?hotpink;
????????????background:?url(images/timg.jpg)?no-repeat;
????????????position:?relative;
????????}
????????#top?{
????????????width:?100%;
????????????height:?50%;
????????????/*?border:?1px?solid?#ccc;?*/
????????????/*?background:?#000;?*/
????????????position:?absolute;
????????????top:?0;
????????????cursor:?pointer;
????????}
????????#bottom?{
????????????width:?100%;
????????????height:?50%;
????????????/*?border:?1px?solid?#ccc;?*/
????????????/*?background:?#000;?*/
????????????position:?absolute;
????????????bottom:?0;
????????????cursor:?pointer;
????????}
????</style>
</head>
<body>
????<div?id="box">
????????<span?id="top"></span>
????????<span?id="bottom"></span>
????</div>
</body>
????<script>
????window.onload?=?function(){
????????let?box?=?document.getElementById('box')
????????let?topbox?=?document.getElementById('top')
????????let?bottombox?=?document.getElementById('bottom')
????????var?m?=?0
????????var?intervalId1?=?null
????????var?intervalId2?=?null
????????topbox.onmouseover?=?function(){
????????????clearInterval(intervalId1)
????????????intervalId1?=?setInterval(function(){
????????????????m?-=?10
????????????????console.log(m)
????????????????if(m?<=?-2466){
????????????????????clearInterval(intervalId1)
????????????????}else{
????????????????????box.style.backgroundPositionY?=?m?+?'px'
????????????????}
????????????},10)
????????}
????????topbox.onmouseleave?=?function(){
????????????clearInterval(intervalId1)
????????}
????????bottombox.onmouseover?=?function(){
????????????clearInterval(intervalId2)
????????????intervalId2?=?setInterval(function(){
????????????????m?+=?10
????????????????console.log(m)
????????????????if(m?>=?0){
????????????????????clearInterval(intervalId2)
????????????????}else{
????????????????????box.style.backgroundPositionY?=?m?+?'px'
????????????????}
????????????},10)
????????}
????????bottombox.onmouseleave?=?function(){
????????????clearInterval(intervalId2)
????????}
????}
????</script>
</html>
