JavaScript之图片操作5
本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示:
其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们称为放大镜,右边也是一个div,我们称为右窗口,在右窗口中有一个大图,要实现放大效果,就需要保证原图/放大镜 = 大图 / 右窗口 = 放大倍率。当鼠标在左图中移动时,让放大镜跟随鼠标一起移动,然后大图在又窗口中同步运动,这样就可以模拟放大效果了。
首先是基本的结果:
<body>
<div id="box">
<img src="img/small.jpg"/>
<div id="small"></div>
</div>
<div id="big">
<img src="img/big.jpg" id="imgs"/>
</div>
</body>
然后是基本样式:
html,body {
margin: 0;
padding:0;
}
/* 小图 */
#box{
width: 310px;
height: 310px;
position: relative;
float:left;
}
#box img{
width:100%;
height:100%;
}
/* 红色方块 */
#box #small{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: red;
opacity: 0.6;
display: none;
}
/* 放大图的盒子 */
#big{
width: 310px;
height: 310px;
overflow: hidden;
position: relative;
display: none;
float:left;
}
/* 大图 */
#big img{
width: 930px;
height: 930px;
position: absolute;
}
这里为了简单操作,我们将右窗口设置成和原图也就是左窗口同样大小。
通过上面我们知道,大图是右窗口的3倍,所以是放大了3倍,而且放大镜是原图的三分之一。
接下来需要设置在鼠标没有悬浮在左窗口时,放大镜、右窗口和原图是不可见的,只有当鼠标悬浮在左窗口之上时,放大镜、右窗口和原图是可见的。
box.onmouseenter = function(e){
big.style.display='block';
small.style.display='block';
} box.onmouseleave = function(e){
big.style.display='none';
small.style.display='none';
}
最后就是监听鼠标事件,实现放大效果了。
box.onmousemove = function(e){
//获取鼠标的x、y坐标。为了让鼠标刚好在small红色小方块的中心,所以需要减去50
var top = e.clientY-50;
var left = e.clientX-50;
//限制small小方块移出box的范围
if(top > 200){top = 200};
if(top <){top = 0};
if(left > 200){left = 200};
if(left <){left = 0};
//动态设置small小方块的位置,让小方块跟随鼠标移动
small.style.left = left + 'px';
small.style.top = top + 'px';
//让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以(-3)呢?因为big里面的大图是box的3倍。鼠标在box上面向右移动1px,那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。
img.style.top = top*(-3) + 'px';
img.style.left = left*(-3) + 'px';
}
这样,就可以实现放大镜效果了。
详细代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
<img src="img/small.jpg"/>
<div id="small"></div>
</div>
<div id="big">
<img src="img/big.jpg" id="imgs"/>
</div>
</body>
<script>
var box = document.querySelector('#box');
var small = document.querySelector('#small');
var big = document.querySelector('#big');
var img = document.querySelector('#imgs');
box.onmousemove = function(e){
var top = e.clientY-50;
var left = e.clientX-50;
if(top > 200){top = 200};
if(top < 0){top = 0};
if(left > 200){left = 200};
if(left < 0){left = 0};
small.style.left = left + 'px';
small.style.top = top + 'px';
img.style.top = top*(-3) + 'px';
img.style.left = left*(-3) + 'px';
}
box.onmouseenter = function(e){
big.style.display='block';
small.style.display='block';
}
box.onmouseleave = function(e){
big.style.display='none';
small.style.display='none';
}
</script>
</html>
jQuery也可以实现上面的效果,原理是一样,基于鼠标事件和定位,这里就不再详细介绍了,会在代码下载链接中给出详细完整的代码。
完整代码下载:点这里
JavaScript之图片操作5的更多相关文章
- JavaScript之图片操作7
前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...
- JavaScript之图片操作1
在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...
- JavaScript之图片操作6
上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...
- JavaScript之图片操作3
在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...
- JavaScript之图片操作4
本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...
- 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 ...
随机推荐
- tomcat服务器安装方法
tomcat: 链接:https://pan.baidu.com/s/1pMEu0hP 密码:g0ah (tomcat7) jdk :链接:https://pan.baidu.com/s/1 ...
- FZU软工第六次作业-团队选题报告
作业链接 队长博客:陈晓彬 团队选题报告 选题报告PPT 原型展示 前言 经过团队的讨论,我们对自己的选题进行了项目立意的进一步确定,后面有项目来源.同时,我们将自己的APP的名字改成了"一 ...
- CodeForces 727C
zsy: Guess the Array Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submi ...
- Laravel学习--时间
date("Y-m-d H:i:s"); list($usec, $sec) = explode(" ", microtime()); $time = (flo ...
- 小米4c刷LineageOS
注意,本文仅限于小米4c,其他手机仅可参考步骤.如下rom,su,gapps包的下载都是小米4c的,深刷miflash也仅适用于小米手机.准备工作:请自行备份好手机内的个人资料. 电脑环境,usb驱动 ...
- 两道dp
链接:https://ac.nowcoder.com/acm/contest/186/C?&headNav=www 来源:牛客网终于Alice走出了大魔王的陷阱,可是现在傻傻的她忘了带武器了, ...
- [Wannafly挑战赛28][B msc和mcc][预处理+枚举]
链接:https://ac.nowcoder.com/acm/contest/217/B来源:牛客网 msc和mcc 题目描述 msc和mcc是一对好朋友,有一天他们得到了一个长度为n的字符串s. 这 ...
- Spring源码学习(总)
前文: ------------------------------------------------------------------------------------------------ ...
- python------模块定义、导入、优化 ------->re模块
该部分内容引用自:http://www.cnblogs.com/alex3714/articles/5161349.html 谢谢原博主的文章,只是自己学习,无其他使用. re模块 常用正则表达式符号 ...
- itcast-svn
svn介绍 1.1 svn服务器的工作方式 数据 库 服务 概念 使用数据库,连接服务,服务操作库 独立服务器方式: svnserve 借助Apache方式: mod_dav_svn ...