This article shares the specific code of JavaScript's long diagram scrolling for your reference. The specific content is as follows
The scrolling of a long graph involves a timer:
Let's review the timer first:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timer review</title>
</head>
<body>
<button >Open</button>
<button >closure</button>
<script type="text/javascript">
var start = ("start");
var stop = ("stop");
var num = 0,timer = null;
= function (){
// When using the timer, first clear the original timer and then turn on the timer. You can try to comment out the clearInterval(timer); and then click the enable button multiple times to compare the effect. clearInterval(timer);
timer = setInterval(function (){
num++;
(num);
},1000)
}
= function (){
clearInterval(timer);
}
</script>
</body>
</html>
After reviewing the timer content, look at the code for scrolling the long picture:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long picture scrolling effect</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #000;
}
#box{
width: 658px;
height: 400px;
border: 1px solid #ff6700;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#box img{
position: absolute;
top: 0;
left: 0;
}
#box span{
position: absolute;
width: 100%;
height: 50%;
left: 0;
cursor: pointer;
}
#box #top{
top: 0;
}
#box #bottom{
bottom: 0;
}
</style>
</head>
<body>
<div >
<img src="img/" alt="">
<span ></span>
<span ></span>
</div>
<script type="text/javascript">
// 1. Obtain the event source var box = ('box');
var pic = ('img')[0];
var divTop = ('top');
var divBottom = ('bottom');
// 2. Add events var num = 0,timer = null;
= function () {
// Clear the previous acceleration effect clearInterval(timer);
// Let the picture scroll down timer = setInterval(function () {
num -= 10;
// This -3666 is controlled by itself based on the picture if(num >= -3666){
= num + 'px';
}else{
clearInterval(timer);
}
},50);
}
= function () {
clearInterval(timer);
// Let the picture scroll up timer = setInterval(function () {
num += 10;
if(num <= 0){
= num + 'px';
}else{
clearInterval(timer);
}
},100);
}
// Mouse is moved away and stop scrolling = function () {
clearInterval(timer);
}
</script>
</body>
</html>
There are no renderings here, you can try it yourself if you need it (remember to find the long picture)
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.