本文实例为大家分享了JavaScript实现左右滚动电影画布的具体代码,供大家参考,具体内容如下
<>强实现效果:
1。鼠标放在图片左边,图片向右移动
2. 鼠标放在图片右边,图片向左移动
3.鼠标放在图片外,图片暂停
<>强实现步骤:
1。将图片显示区域设置为一个盒子,盒子之外隐藏,这个盒子定义为屏幕
2.将图片放在一个大盒子中,屏幕分相同两部分一个左屏幕,一个右屏幕对左右屏幕分别设置onmouseover事件,对整个屏幕设置onmouseout事件
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>左右滚动的电影画布& lt;/title>
& lt; style>
.screen {
宽度:1024 px;
身高:768 px;
位置:相对;
溢出:隐藏;
保证金:100 px的汽车;
}
.box {
宽度:2180 px;
身高:500 px;
位置:绝对的;
}
.screen跨度{
宽度:512 px;
身高:500 px;
光标:指针;
位置:绝对的;
}
.screen .left {
上图:0;
左:0;
}
.screen铃声{
左:512 px;
上图:0;
}
& lt;/style>
& lt; script>
函数$ (id) {
返回. getelementbyid (id);
}
窗口。onload=function () {=$ var框(盒);
var左=$('左');
var右=$('正确');
var定时器;
var num=0;
离开了。onmouseover=function () {
计时器=setInterval(函数(){
box.style。左=num +“px”;
num + +;
如果(num祝辞=0){
clearInterval(计时器);
}
},20)
}
正确的。onmouseover=function () {
计时器=setInterval(函数(){
box.style。左=num +“px”;
num -;
如果(num & lt;=-1156) {
clearInterval(计时器);
}
},20)
}
$(“屏幕”)。onmouseout=function () {
clearInterval(计时器);
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=捌聊弧眂lass=捌聊弧北?& lt; !——屏幕显示内容——比;
& lt; div id=昂凶印眂lass=昂凶印北?& lt; !——用于装图片的盒子——比;
& lt; img src=" https://www.yisu.com/zixun/imgs/mj.jpg " alt="图片" id=巴计北?
& lt;/div>
& lt;跨度id=白蟆眂lass=白蟆弊４? lt;/span>
& lt;跨度id=罢贰眂lass=罢贰钡淖４? lt;/span>
& lt;/div>
& lt;/body>
& lt;/html>
收获:需要将容纳图片的盒子设置绝对定位,否则图片不会移动,也可不将图片放在盒子里,但是必须对图片设置绝对定位,否则不移动
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
