本文實例為大家分享了JavaScript實現(xiàn)左右滾動電影畫布的具體代碼,供大家參考,具體內(nèi)容如下
創(chuàng)新互聯(lián)公司是少有的網(wǎng)站制作、成都做網(wǎng)站、營銷型企業(yè)網(wǎng)站、成都微信小程序、手機APP,開發(fā)、制作、設計、買鏈接、推廣優(yōu)化一站式服務網(wǎng)絡公司,從2013年創(chuàng)立,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評
實現(xiàn)效果:
1. 鼠標放在圖片左邊,圖片向右移動
2. 鼠標放在圖片右邊,圖片向左移動
3. 鼠標放在圖片外,圖片暫停
實現(xiàn)步驟:
1.將圖片顯示區(qū)域設置為一個盒子,盒子之外隱藏,這個盒子定義為屏幕
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"> <!-- 屏幕顯示內(nèi)容--> <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>
收獲:需要將容納圖片的盒子設置絕對定位,否則圖片不會移動,也可不將圖片放在盒子里,但是必須對圖片設置絕對定位,否則不移動
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章名稱:JavaScript實現(xiàn)左右滾動電影畫布
轉(zhuǎn)載來源:http://bm7419.com/article0/jcsgoo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設計、電子商務、網(wǎng)站策劃、服務器托管、網(wǎng)站維護、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)