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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
深入理解Promise.all
Aug 08 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
小程序关于请求同步的总结
May 05 Javascript
JS实现京东商品分类侧边栏
Dec 11 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配置文件php.ini的路径的方法
2014/08/20 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
js控制frameSet示例
2013/09/10 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python os模块简单应用示例
2019/05/23 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python3爬取torrent种子链接实例
2020/01/16 Python
利用python实现逐步回归
2020/02/24 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
高考自主招生自荐信
2013/10/20 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
综治工作汇报材料
2014/10/27 职场文书
小学生毕业评语
2014/12/26 职场文书
普宁寺导游词
2015/02/04 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书