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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
Javascript类型判断相关例题及解析
Aug 26 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 EOT定界符的使用详解
2008/09/30 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP读取xml方法介绍
2013/01/12 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python 检查文件mime类型的方法
2018/12/08 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
详解python算法常用技巧与内置库
2020/10/17 Python
教师党员一句话承诺
2014/03/28 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
物业消防安全责任书
2014/07/23 职场文书
委托书格式
2014/08/01 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android