JavaScript實現左右滾動電影畫布
阿新 • • 發佈:2020-02-07
本文例項為大家分享了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>
收穫:需要將容納圖片的盒子設定絕對定位,否則圖片不會移動,也可不將圖片放在盒子裡,但是必須對圖片設定絕對定位,否則不移動
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。