JavaScript实现左右滚动电影画布

本文实例为大家分享了JavaScript实现左右滚动电影画布的具体代码，供大家参考，具体内容如下

创新互联公司是少有的网站制作、成都做网站、营销型企业网站、成都微信小程序、手机APP,开发、制作、设计、买链接、推广优化一站式服务网络公司,从2013年创立,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评

实现效果：

1. 鼠标放在图片左边，图片向右移动
2. 鼠标放在图片右边，图片向左移动
3. 鼠标放在图片外，图片暂停

实现步骤：

1.将图片显示区域设置为一个盒子，盒子之外隐藏，这个盒子定义为屏幕
2.将图片放在一个大盒子中，屏幕分相同两部分一个左屏幕，一个右屏幕对左右屏幕分别设置onmouseover事件，对整个屏幕设置onmouseout事件

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。