作者:勇_俊 | 来源:互联网 | 2021-08-04 20:21
本文实例为大家分享了Javascript实现左右滚动电影画布的具体代码,供大家参考,具体内容如下
实现效果:
1. 鼠标放在图片左边,图片向右移动
2. 鼠标放在图片右边,图片向左移动
3. 鼠标放在图片外,图片暂停
实现步骤:
1.将图片显示区域设置为一个盒子,盒子之外隐藏,这个盒子定义为屏幕
2.将图片放在一个大盒子中,屏幕分相同两部分一个左屏幕,一个右屏幕对左右屏幕分别设置onmouseover事件,对整个屏幕设置onmouseout事件
收获:需要将容纳图片的盒子设置绝对定位,否则图片不会移动,也可不将图片放在盒子里,但是必须对图片设置绝对定位,否则不移动
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。