本文实例为大家分享了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>
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:JavaScript实现左右滚动电影画布-创新互联
转载源于:https://www.cdcxhl.com/article30/eopso.html
成都网站建设公司_创新互联,为您提供定制开发、网站设计、小程序开发、网站排名、网站内链、品牌网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联