JavaScript之图片操作4
2021-07-14 07:05
标签：通过 简单的 com 设置 none ntb 图片 https href 本次要实现的效果是，在一个盒子里面有一张长图，只显示了一部分，为方便用户浏览，当鼠标移入时，图片开始滚动，将盒子分成上下两部分，当鼠标移入上部分时，图片向上滚动，当鼠标移入下部分时，图片向下滚动。 为了实现上面的效果，我们需要在html中进行简单的布局： 其中div为外层固定大小的大盒子，因为图片大于盒子，所以需要将盒子设置超出隐藏，图片上下滚动式通过定位实现的，需要将图片设置为相对父级定位，通过两个span来判断鼠标移入时的位置是在上半部分还是下半部分，所以两个span均为盒子的一半，分别位于盒子的上半部分和下半部分。 接下来开始写相应的事件，首先需要获取相应的元素标签 然后监听鼠标事件，并用定时器实现动画效果。 现在基本可以实现图片相应鼠标，进行上下滑动了，但还是有问题，首先是定时器累加，其次是图片无限制的上下滑动，针对这两个问题，我们需要在每次鼠标进入时清除定时器，另外就是判断滚动的临界值： 根据上面的两点，重新整理上面的代码： 完整代码下载链接：点这里 JavaScript之图片操作4 标签：通过 简单的 com 设置 none ntb 图片 https href 原文地址：https://www.cnblogs.com/yuyujuan/p/9539245.html
div id="box">
img id="pic" src="images/timg.jpg" alt="">
span id="to_top">span>
span id="to_bottom">span>
div>
style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #000;
}
#box{
width: 750px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#pic{
position: absolute;
left: 0;
top: 0;
}
#to_top, #to_bottom{
width: 100%;
height: 50%;
/*background-color: greenyellow;*/
position: absolute;
left: 0;
cursor: pointer;
}
#to_top{
top: 0;
}
#to_bottom{
bottom: 0;
}
style>
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var to_top = document.getElementById("to_top");
var to_bottom = document.getElementById("to_bottom");
to_top.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + ‘px‘;
}, 20);
};
to_bottom.onmouseover = function () {
timer = setInterval(function () {
num += 10;
pic.style.top = num + ‘px‘;
}, 20);
};
box.onmouseout = function () {
clearInterval(timer);
}
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #000;
}
#box{
width: 750px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#pic{
position: absolute;
left: 0;
top: 0;
}
#to_top, #to_bottom{
width: 100%;
height: 50%;
/*background-color: greenyellow;*/
position: absolute;
left: 0;
cursor: pointer;
}
#to_top{
top: 0;
}
#to_bottom{
bottom: 0;
}
style>
head>
body>
div id="box">
img id="pic" src="images/timg.jpg" alt="">
span id="to_top">span>
span id="to_bottom">span>
div>
script>
window.onload = function () {
// 1. 获取标签
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var to_top = document.getElementById("to_top");
var to_bottom = document.getElementById("to_bottom");
var timer = null, num = 0;
// 2. 监听鼠标事件
to_top.onmouseover = function () {
// 2.1 清除定时器
clearInterval(timer);
// 2.2 设置定时器
timer = setInterval(function () {
// 步长
num -= 10;
// 判断
if(num >= -2466){
pic.style.top = num + ‘px‘;
}else {
clearInterval(timer);
}
}, 20);
};
to_bottom.onmouseover = function () {
// 2.1 清除定时器
clearInterval(timer);
// 2.2 设置定时器
timer = setInterval(function () {
// 步长
num += 10;
// 判断
if(num 0){
pic.style.top = num + ‘px‘;
}else {
clearInterval(timer);
}
}, 20);
};
box.onmouseout = function () {
// 清除定时器
clearInterval(timer);
}
}
script>
body>
html>