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 ...
随机推荐
- UAC 注册表 WIN64 OS 运行时主题
首先EXE程序是32位,DelphiIDE对Project默认是启用主题的,默认情况在WIN64 OS下运行时,无管理员权限. WIN64 OS,默认情况下UAC是启用的. 上述默认情况下,EXE 是 ...
- 玩转X-CTR100 l STM32F4 l OLED显示-SSD1306无字库
我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] OLED显示屏具有自发光特性,不需要背光, ...
- java中的块
之前没听过这个概念 块是java类中不太常见的一个元素.声明方式与方法体类似,分为static块和实例块两种. 实例块: {块体} 实例块不能直接调用,每一次调用构造方法创建对象的时候,都会在调用构造 ...
- Mac OS X 10.9下解决cocos2d-x在Xcode4.6.x的模板不显示问题
最近将iMac 升级到10.9了,奇怪的事情发生了,cocos2d-x的模板不见了,鼓捣了半天发现问题所在 打开xcode新建工程却找不到cocos2d-x的模板. 经过在网上的苦苦搜寻和试验后,找到 ...
- 逆向路由器固件之敏感信息泄露 Part2
之前的文章中详细介绍了各种解包路由器固件的工具.解包之后就获得了固件中的文件.下一步就是分析文件寻找漏洞了.这次分析的目标是Trendnet路由器,分析的漏洞是一个远程获取路由器权限的漏洞. 初步分析 ...
- 子域名爆破&C段查询&调用Bing查询同IP网站
在线子域名爆破 <?php function domainfuzz($domain) { $ip = gethostbyname($domain); preg_match("/\d+\ ...
- MySQL配置参数详解
# 以下选项会被MySQL客户端应用读取. # 注意只有mysql附带的客户端应用程序保证可以读取这段内容. # 如果你想你自己的MySQL应用程序获取这些值. # 需要在MySQL客户端库初始化的时 ...
- ubuntu 安装最新的python3.7.0
原文:https://www.cnblogs.com/ningvsban/p/4384995.html 1. 安装pyenv git clone git://github.com/yyuu/pyenv ...
- python Gevent – 高性能的Python并发框架
话说gevent也没个logo啥的,于是就摆了这张图= =|||,首先这是一种叫做greenlet的鸟,而在python里,按照官方解释greenlet是轻量级的并行编程,而gevent呢,就是利用g ...
- WEB接口测试之Jmeter接口测试自动化 (三)
接口测试与数据驱动 1简介 数据驱动测试,即是分离测试逻辑与测试数据,通过如excel表格的形式来保存测试数据,用测试脚本读取并执行测试的过程. 2 数据驱动与jmeter接口测试 我们已经简单介绍了 ...