如何用JavaScript编写实现电影画布左右滚动功能的长尾？

2026-04-05 10:5011阅读0评论SEO问题

内容介绍
文章标签
相关推荐

本文共计661个文字，预计阅读时间需要3分钟。

原文示例：本文实例为大家分享了JavaScript实现左右滚动电影海报的具体代码，供大家参考。具体内容如下：+ 实现效果：

1.鼠标放在图片左边，图片向右移动

2.鼠标放在图片右边，图片向左移动

改写后：

实例代码：使用JavaScript实现电影海报左右滚动功能，代码简洁，如下：+ 效果展示：

1.鼠标移至图片左侧，图片右移

2.鼠标移至图片右侧，图片左移

本文实例为大家分享了JavaScript实现左右滚动电影画布的具体代码，供大家参考，具体内容如下

实现效果：

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 id="screen" class="screen">  <div id="box" class="box">  <img src="imgs/mj.jpg" alt="图片" id="pic"> </div> <span id="left" class="left"></span> <span id="right" class="right"></span> </div> </body> </html>

收获：需要将容纳图片的盒子设置绝对定位，否则图片不会移动，也可不将图片放在盒子里，但是必须对图片设置绝对定位，否则不移动

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：javascript 实现左右滚动电影