1. 鼠标放在图片左边，图片向右移动
2. 鼠标放在图片右边，图片向左移动
3. 鼠标放在图片外，图片暂停
实现步骤：
1.将图片显示区域设置为一个盒子，盒子之外隐藏，这个盒子定义为屏幕
2.将图片放在一个大盒子中，屏幕分相同两部分一个左屏幕，一个右屏幕对左右屏幕分别设置onmouseover事件，对整个屏幕设置onmouseout事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右滚动的电影画布</title> <style> .screen{ width: 1024px; height: 768px; position: relative; overflow: hidden; margin: 100px auto; } .box{ width: 2180px; height: 500px; position:absolute; } .screen span{ width: 512px; height: 500px; cursor: pointer; position: absolute; } .screen .left{ top: 0; left: 0; } .screen .right{ left: 512px; top: 0; } </style> <script> function $(id){ return document.getElementById(id); } window.onload = function(){ var box = $('box'); var left = $('left'); var right = $('right'); var timer; var num = 0; left.onmouseover = function(){ timer = setInterval(function(){ box.style.left = num + 'px'; num++; if(num >= 0){ clearInterval(timer); } },20) } right.onmouseover = function(){ timer = setInterval(function(){ box.style.left = num + 'px'; num--; if(num <= -1156){ clearInterval(timer); } },20) } $('screen').onmouseout = function(){ clearInterval(timer); } } </script> </head> <body> <div> <!-- 屏幕显示内容--> <div> <!--用于装图片的盒子--> <img src="https://www.jb51.net/imgs/mj.jpg" alt="图片"> </div> <span></span> <span></span> </div> </body> </html>
收获：需要将容纳图片的盒子设置绝对定位，否则图片不会移动，也可不将图片放在盒子里，但是必须对图片设置绝对定位，否则不移动