js之放大镜效果
.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="box">
<div id="large-box">
<img src="data:images/1.jpg" id="large-img">
</div>
<div id="middle-box">
<img src="data:images/1.jpg" id="middle-img">
<div id="shadow"></div>
</div>
<div id="small-box">
<img src="data:images/1.jpg" class="active">
<img src="data:images/2.jpg">
<img src="data:images/3.jpg">
<img src="data:images/4.jpg">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: #000;
}
img {
vertical-align: bottom;
}
#box {
position: relative;
margin: 10px;
padding: 10px;
width: 260px;
background: #fff;
}
#large-box {
display: none;
position: absolute;
top: 0;
left: 290px;
width: 260px;
height: 260px;
overflow: hidden;
}
#large-img {
position: absolute;
width: 520px;
height: 520px;
}
#middle-box {
position: relative;
}
#middle-img {
width: 100%;
}
#shadow {
display: none;
position: absolute;
left: 0;
top: 0;
width: 130px;
height: 130px;
background: rgba(255, 0, 0, .4);
cursor: move;
}
#small-box {
margin-top: 10px;
overflow: hidden;
}
#small-box img{
float: left;
width: 63px;
border: 1px solid #fff;
}
#small-box .active {
border-color: red;
}
function $(id) {
return document.getElementById(id);
}
var oBox = $('box');
var oSmallBox = $('small-box');
var aSmallImg = Array.from(oSmallBox.children);
var oMiddleBox = $('middle-box');
var oMiddleImg = $('middle-img');
console.log(oMiddleImg);
var oLargeBox = $('large-box');
var oLargeImg = $('large-img');
var oShadow = $('shadow');
// 给缩略图添加鼠标进入事件
aSmallImg.forEach( v => {
v.onmouseover = function () {
// 先去掉所有的class名
aSmallImg.forEach(v => v.className = '');
// 当前img添加class
this.className = 'active';
// 改变中型图片的地址
oMiddleImg.src = this.src;
// 改变大型图片的地址
oLargeImg.src = this.src;
};
});
// 遮罩层最大的left和top值
var maxL = 0;
var maxT = 0;
// 大图片最大的left和top值
var maxLargeImgL = 0;
var maxLargeImgT = 0;
// 鼠标进入middle-box
oMiddleBox.onmouseover = function () {
// 显示遮罩层
oShadow.style.display = 'block';
// 显示右侧的盒子
oLargeBox.style.display = 'block';
// 获取最大的left和top值
maxL = oMiddleBox.offsetWidth - oShadow.offsetWidth;
maxT = oMiddleBox.offsetHeight - oShadow.offsetHeight;
maxLargeImgL = oLargeImg.offsetWidth - oLargeBox.offsetWidth;
maxLargeImgT = oLargeImg.offsetHeight - oLargeBox.offsetHeight;
};
// 鼠标离开middle-box
oMiddleBox.onmouseout = function () {
// 显示遮罩层
oShadow.style.display = 'none';
// 显示右侧的盒子
oLargeBox.style.display = 'none';
};
// 给middle-box添加移动事件
oMiddleBox.onmousemove = function (ev) {
var e = ev || window.event;
var iL = e.clientX - oShadow.offsetWidth / 2 - oMiddleBox.offsetLeft - oBox.offsetLeft;
var iT = e.clientY - oShadow.offsetHeight / 2 - oMiddleBox.offsetTop - oBox.offsetTop;
// 限定左侧
if(iL < 0) {
iL = 0;
}
// 限定上侧
if(iT < 0) {
iT = 0;
}
// 限定右侧
if(iL > maxL) {
iL = maxL;
}
// 限定下侧
if(iT > maxT) {
iT = maxT;
}
oShadow.style.left = iL + 'px';
oShadow.style.top = iT + 'px';
// 让大图移动
oLargeImg.style.left = - iL * maxLargeImgL / maxL + 'px';
oLargeImg.style.top = - iT * maxLargeImgT / maxT + 'px';
};
js之放大镜效果的更多相关文章
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- 使用js实现放大镜效果
点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心 可以通过滑轮控制放大倍数,由于图片太大 如果放大镜没有出现 可刷新一下网页
- JS实现放大镜效果(放大图片)
注意:里边的两张图片(一大一小)可以自己添加,JQ采用jquery-1.11.3.js版,也可自行调换. HTML代码: <!DOCTYPE html> <html> < ...
- js实现放大镜效果
原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置: 放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步: 需要元素:大图和小图,存放大图和小图的容器 ...
- jquery+js实现鼠标位移放大镜效果
jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...
- javascript放大镜效果
JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...
- 用js实现放大镜的效果
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
随机推荐
- poi解析Excel文件版本问题
poi解析Excel文件时有两种格式: HSSFWorkbook格式用来解析Excel2003(xls)的文件 XSSFWorkbook格式用来解析Excel2007(xlsx)的文件 如果用HSSF ...
- SpringMvc中的校验框架@valid和@validation的概念及相关使用 和BindingResult bindingResult
1.比较 @Valid是使用hibernate validation的时候使用 @Validated 是只用spring Validator 校验机制使用\ 2.实现 其中,@valid,java的 ...
- Linux命令详解-mkdir
linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 1．命令格式: mkdir [选项] 目录... 2．命令 ...
- 为什么MVC不是一种设计模式？
引用一段话: GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable Object-Oriented Software> ...
- Highcharts 时间序列，可缩放的图表；Highcharts X 轴翻转曲线图；Highcharts 带标记曲线图
Highcharts 时间序列,可缩放的图表 配置 图表 配置可缩放图表. chart.zoomType 指定了用户可以拖放的尺寸,用户可以通过拖动鼠标来放大,可能值是x,y或xy: var char ...
- restframework api（基础1）
最近项目忙成狗,都没时间好好看看开发的东西了,正好最近开始看rest api的东西,真是个好东西啊.可以前后端分离,但是在学习的过程中,遇到各种问题.还是基础不够扎实.本次rest api的会一边遇坑 ...
- scrapy 6023 telnet查看爬虫引擎相关状态
Telnet终端(Telnet Console) Scrapy提供了内置的telnet终端,以供检查,控制Scrapy运行的进程. telnet仅仅是一个运行在Scrapy进程中的普通python终端 ...
- 【BZOJ】3389: [Usaco2004 Dec]Cleaning Shifts安排值班（贪心）
http://www.lydsy.com/JudgeOnline/problem.php?id=3389 显然左端点排序后,依次取. 要考虑下一次取的方案: 待选点为a[j].x<=a[now] ...
- 二、DBMS_JOB(用于安排和管理作业队列)
1.概述 作用:用于安排和管理作业队列,通过使用作业,可以使ORACLE数据库定期执行特定的任务注意:当使用DBMS_LOB管理作业时,必须确保设置了初始化参数job_queue_processes( ...
- 基于C#在Mongodb的Skip-Limit和Where-Limit的分页对比 并且含mongodb帮助类的源码
最近在设计的日志服务中需要用到Mongodb这个Nosql数据库(不知道Mongodb的点我),由于是用于纯存日志,而且日志量巨大,百万千万级的,所以需要用到它的分页查询. 不过LZ也是刚刚接触这个数 ...