JavaScript之图片操作4
本次要实现的效果是，在一个盒子里面有一张长图，只显示了一部分，为方便用户浏览，当鼠标移入时，图片开始滚动，将盒子分成上下两部分，当鼠标移入上部分时，图片向上滚动，当鼠标移入下部分时，图片向下滚动。
为了实现上面的效果，我们需要在html中进行简单的布局：
<div id="box">
<img id="pic" src="data: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="data: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>
完整代码下载链接：点这里
JavaScript之图片操作4的更多相关文章
- JavaScript之图片操作7
前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...
- JavaScript之图片操作5
本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...
- JavaScript之图片操作1
在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...
- JavaScript之图片操作6
上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...
- JavaScript之图片操作3
在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...
- JavaScript之图片操作2
在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换.因此,我们需要三个容器分别放标题,大图和小图. <!--大图描述- ...
- JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
随机推荐
- (转载)Hibernate的事务管理
Hibernate的事务管理 事务(Transaction)是工作中的基本逻辑单位,可以用于确保数据库能够被正确修改,避免数据只修改了一部分而导致数据不完整,或者在修改时受到用户干扰.作为一名软件设计 ...
- JQ插件写法 扩展JQ方法
目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.cl ...
- 企业信息管理软件 OA、CRM、PM、HR 财务、ERP等
本文就企业信息管理软件做一个记录. 最近公司要开发物料管理系统....于是查找一些资料 Excel垄断企业信息管理软件二三十年无人撼动:OA.CRM.PM.HR软件不温不火难以普及. 已有的信息化市场 ...
- 如何修改tomcat端口以及tomcat热部署
一.修改tomcat端口 1.首先我们需要知道,http的默认端口是80,tomcat的默认端口是8080,也就是说,如果我们将tomcat的默认端口号修改为80,输入网址的时候就可以不用输入端口了, ...
- JSP--TOMCAT-MYSQL web页面删除
deleteStudentjsp.jsp页面代码 <%@ page language="java" contentType="text/html; charset= ...
- HTML5的classList API优化对样式名className的操作
//添加一个class elem.classList.add(classname); //删除一个class elem.classList.remove(classname); //判断一个class ...
- WebGL编程指南案例解析之平移和旋转的math库实现
这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...
- 图片和span水平垂直居中
<style type="text/css"> .content{ width:20%; height:60px; border:1px solid red; text ...
- windows运行打开服务命令
1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管 ...
- spring jdbc配置文件进行加密解密
最近做一个项目,安全上有点要求,就是要对数据库相关的配置进行加密,配置文件如下: #加密前#datasource.type=mysql #datasource.driverClassName=com. ...