本文实例为大家分享了JS实现长图上下滚动的具体代码,供大家参考,具体内容如下
<强>案例描述
将一张长图放在某一固定长宽的盒子里,当鼠标置于盒子的上半部分时,图片向下滑直到到达图片的底部停止;当鼠标置于盒子的下半部分时,图片向上滑直到到达图片的顶部停止。
<强>案例图示
HTML
& lt; div id=昂凶印北?
& lt; img id="图片" src=" https://www.yisu.com/zixun/program1/images/1.jpg " alt="比;
& lt; div id=岸ゼ丁弊４? lt;/div>
& lt; div id="底"祝辞& lt;/div>
CSS
CSS不作过多解释,详解请看注释部分
//通用样式
* {
保证金:0;
填充:0;
}
#箱{
宽度:750 px;
身高:200 px;
边界:1 px固体# 000;
保证金:200 px的汽车;
溢出:隐藏;/*图片溢出部分隐藏*/位置:相对;/*子绝父相*/}
#图片{
位置:绝对的;
左:0;
右:0;
}
#{顶部
宽度:100%;
高度:50%;
位置:绝对的;/*子绝父相*/左:0;
光标:指针;/*鼠标*//*顶部对齐*/上图:0;
}
#{底部
宽度:100%;
高度:50%;
位置:绝对的;/*子绝父相*/左:0;
光标:指针;/*底部对齐*/底部:0;
}
& lt;/style>
<强> JS核心代码
鼠标停留在盒子上半部分时,使用onmouseover事件。首先要清除定时器,否则可能会出现定时器重叠现象;再设置定时器,定时器中的num就是改变图片的上属性以达到图片向上滑动的效果如果语句中的条件是为了达到图片到达底部时停止向上滑的目的。(盒子下半部分类似)
上面。onmouseover=function () {//改变图中最高的//清除定时器//警报(0);
clearInterval (intervalId);//设置定时器
intervalId=setInterval(函数(){
如果(num比;-600){
num -=10;
pic.style。顶级=num +“px”;
}
}, 20);
鼠标移出时使用这个事件,清除定时器。(盒子下半部分类似)
上面。onmouseout=function () {
clearInterval (intervalId);
}
& lt; script>
窗口。onload=function () {//获取标签
var盒=. getelementbyid(盒);
var图片=. getelementbyid(图片);
var顶级=. getelementbyid(“顶级”);
var=. getelementbyid(底部);
var intervalId, num=0;//鼠标进入上半部分
上面。onmouseover=function () {//改变图中最高的//清除定时器//警报(0);
clearInterval (intervalId);//设置定时器
intervalId=setInterval(函数(){
如果(num比;-600){
num -=10;
pic.style。顶级=num +“px”;
}
},20);
};//鼠标移出上半部分
上面。onmouseout=function () {
clearInterval (intervalId);
}//鼠标进入下半部分
底部。onmouseover=function () {//改变图中最高的//清除定时器//警报(0);
clearInterval (intervalId);//设置定时器
intervalId=setInterval(函数(){
如果(num & lt;0){
num +=10;
pic.style。顶级=num +“px”;
}
},20);
};//鼠标移出下半部分
底部。onmouseout=function () {
clearInterval (intervalId);
};
}
& lt;/script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
