用JavaScript实现左右滚动的电影画布效果

最新推荐文章于 2023-02-07 08:20:47 发布

空谷丶幽兰

最新推荐文章于 2023-02-07 08:20:47 发布

阅读量540

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/103231122

版权

JavaScript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

实现效果：

           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>