摘要:本篇教程介绍了JavaScript进阶学习之图片操作4,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
本篇教程介绍了JavaScript进阶学习之图片操作4,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
<
本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动。
技术分享图片
为了实现上面的效果,我们需要在html中进行简单的布局:
<div id="box">
<img id="pic" src="images/timg.jpg" alt="">
<span id="to_top"></span>
<span id="to_bottom"></span>
</div>
其中div为外层固定大小的大盒子,因为图片大于盒子,所以需要将盒子设置超出隐藏,图片上下滚动式通过定位实现的,需要将图片设置为相对父级定位,通过两个span来判断鼠标移入时的位置是在上半部分还是下半部分,所以两个span均为盒子的一半,分别位于盒子的上半部分和下半部分。
<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);
}
现在基本可以实现图片相应鼠标,进行上下滑动了,但还是有问题,首先是定时器累加,其次是图片无限制的上下滑动,针对这两个问题,我们需要在每次鼠标进入时清除定时器,另外就是判断滚动的临界值:
图片向下滚动时,顶部距离父级元素的位置不能大于0,即初始的默认值位置
图片向上滚动时,顶部距离父级元素的位置不能小于图片长度与盒子高度的差值
根据上面的两点,重新整理上面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号