JavaScript实现左右滚动电影画布


Posted in Javascript onFebruary 06, 2020

本文实例为大家分享了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实现左右滚动电影画布

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
js创建对象的方式总结
Jan 10 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JavaScript实现Tab选项卡切换
Feb 13 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 #Javascript
使用node.JS中的url模块解析URL信息
Feb 06 #Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 #Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 #Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 #Javascript
ckeditor一键排版功能实现方法分析
Feb 06 #Javascript
JavaScript如何判断input数据类型
Feb 06 #Javascript
You might like
php正则表达式使用的详细介绍
2013/04/27 PHP
php通过字符串调用函数示例
2014/03/02 PHP
php之readdir函数用法实例
2014/11/13 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
js常用排序实现代码
2010/12/28 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Django的CVB实例详解
2020/02/10 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
模具毕业生推荐信
2014/02/15 职场文书
新年主持词
2014/03/27 职场文书
社区志愿者活动方案
2014/08/18 职场文书
学习十八大演讲稿
2014/09/15 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
客户答谢会致辞
2015/07/30 职场文书