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 ...
随机推荐
- 【DevExpress v17.2新功能预告】WinForms上的图表增强
在WinForms Charts v17.2中,我们新增了一些有用的功能,开发人员和最终用户可能都会喜欢. 基于标准的过滤 Chart控件已经支持一系列的过滤,但是在这个版本中,我们用FilterCr ...
- git账号申请及创建基线
1.填写注册信息 https://github.com/ 进入官网 填写用户名,邮箱,密码然后点击sign up for github 2.后面不记得了,然后就可以创建项目了 3.填写项目名称及描述, ...
- mysql-connector-java-3.1.10-bin-g.jar 和 mysql-connector-java-3.1.10-bin.jar两个文件有什么不同呀？
MySQL Connector/J的文档里说: MySQL Connector/J is distributed as a .zip or .tar.gz archive containing the ...
- PHP文件上传大小设置
PHP.INI配置:文件上传功能配置教程 打开php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项. php.ini中文件上 ...
- Nginx+Keepalive实现高可用负载均衡
1.准备2台服务器 服务器名LB1,假设IP为192.168.1.100 服务器名LB2,假设IP为192.168.1.101 2.在LB1,LB2上分别安装Nginx 步骤参照:http://blo ...
- HDU2034：人见人爱A-B
Problem Description 参加过上个月月赛的同学一定还记得其中的一个最简单的题目,就是{A}+{B},那个题目求的是两个集合的并集,今天我们这个A-B求的是两个集合的差,就是做集合的减法 ...
- .NET 中什么样的类是可使用 await 异步等待的？
我们已经知道 Task 是可等待的,但是去看看 Task 类的实现,几乎找不到哪个基类.接口或者方法属性能够告诉我们与 await 相关. 而本文将探索什么样的类是可使用 await 异步等待的? D ...
- VS2013、VS2015中，新建项目没有看到解决方案的问题（已解决）
问题描述:装好VS2013 专业版 for Update5不知怎么弄的,突然新建项目没有了解决方案,于是各种折腾,最后终于解决了! ================================== ...
- Make menuconfig生成文件
1.当我们在执行make menuconfig这个命令时,一共涉及到了以下几个文件: Linux内核根目录下的scripts文件夹 arch/$ARCH/Kconfig文件.各层目录下的Kconfig ...
- stenciljs 学习三 组件生命周期
stenciljs 组件包含好多生命周期方法, will did load update unload 实现生命周期的方法比价简单类似 componentWillLoad ....,使用typescr ...