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 面向对象 function类
May 13 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
javascript中Object使用详解
Jan 26 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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
Laravel框架中自定义模板指令总结
2017/12/17 PHP
JavaScript 学习技巧
2010/02/17 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
webpack打包react项目的实现方法
2018/06/21 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python函数式编程
2017/07/20 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
法学研究生自我鉴定范文
2013/12/04 职场文书
园林施工员岗位职责
2013/12/11 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
企业职业病防治方案
2014/05/29 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书