<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
* {
margin: 0;
padding: 0
}

#demo {
display: block;
width: 400px;
height: 586px;
margin: 50px;
position: relative;
}

#small-box {
position: relative;
z-index: 1;
}

#small-box img {
width: 400px;
height: 586px;
}

#float-box {
display: none;
width: 120px;
height: 120px;
position: absolute;
background: #dcf4ff;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}

#mark {
position: absolute;
display: block;
width: 400px;
height: 586px;
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
z-index: 10;
}

#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 400px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
;
}

#big-box img {
position: absolute;
z-index: 5
}
</style>
<script>
//页面加载完毕后执行
window.onload = function () {

//获取需要的标签
let objDemo = document.getElementById("demo");
let objSmallBox = document.getElementById("small-box");
let objMark = document.getElementById("mark");
let objFloatBox = document.getElementById("float-box");
let objBigBox = document.getElementById("big-box");
let objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

//鼠标悬浮时，浮块和右侧放大镜显示
objMark.onmouseover = function () {
objFloatBox.style.display = "block"
objBigBox.style.display = "block"
}
//鼠标离开后，浮块和右侧放大镜隐藏
objMark.onmouseout = function () {
objFloatBox.style.display = "none"
objBigBox.style.display = "none"
}

//鼠标在遮罩层移动时
objMark.onmousemove = function (ev) {

let _event = ev || window.event; //兼容多个浏览器的event参数模式
// console.log(_event.clientX);//鼠标到屏幕左侧的距离
// console.log(objDemo.offsetLeft);//外框到屏幕左侧的距离，因为它的父元素为body
// console.log(objSmallBox.offsetLeft);//小盒子的margin
// console.log(objFloatBox.offsetWidth);//浮块的宽度

let left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
let top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

//设置边界处理，防止移出小图片
if (left < 0) {
left = 0;
} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
left = objMark.offsetWidth - objFloatBox.offsetWidth;
}

if (top < 0) {
top = 0;
} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
top = objMark.offsetHeight - objFloatBox.offsetHeight;

}

objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言
objFloatBox.style.top = top + "px";

//求其比值
let percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
let percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

//方向相反，小图片鼠标移动方向与大图片相反，故而是负值
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}
}
</script>
</head>

<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="timg.jpg" />
</div>
<div id="big-box">
<img src="timg.jpg" />
</div>
</div>
</body>

</html>

js实现放大效果的更多相关文章

  1. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  2. js hover放大效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  4. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  5. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  6. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  7. 为BlueLake主题增加图片放大效果

    fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

随机推荐

  1. MySQL 主从复制实战解析

    前言:前面几篇文章讲解了在应用层读写分离的配置和使用,这篇文章将来个主从复制的实战解析. 说明:主从复制,读写分离结构图 原理图 主库生成一个线程: Binlog Dump线程 1.此线程运行在主库, ...

  2. plink计算两个SNP位点的连锁不平衡值（LD）

    PLINK提供了“--ld”的参数计算两个SNP位点的连锁不平衡值. 命令如下: plink --file file --ld rs123 rs134 --out rs123_rs134 生成如下数据 ...

  3. 《11招玩转网络安全》之第五招：DVWA命令注入

    首先还是将DVWA的安全级别设置为Low,然后单击DVWA页面左侧的Command Injection按钮. ​ 图5-1  Low级别的命令注入 这个就是最典型的命令注入接口.在文本框中输入一个IP ...

  4. Spring rabbitMq 中 correlationId或CorrelationIdString 消费者获取为null的问题

    问题 在用Spring boot 的 spring-boot-starter-amqp   快速启动 rabbitMq 是遇到了个坑 消费者端获取不到:correlationId或Correlatio ...

  5. Codeforces Round #484 (Div. 2)Cut 'em all!（dfs)

    题目链接 题意:给你一棵树,让你尽可能删除多的边使得剩余所有的联通组件都是偶数大小. 思路:考虑dfs,从1出发,若当前节点的子节点和自己的数目是偶数,说明当前节点和父亲节点的边是可以删除的,答案+1 ...

  6. 论文翻译——Lattice indexing for spoken term detection

    第II节简要介绍与本文有关的先前工作第III节介绍文中使用的定义以及术语 第IV节介绍如何从原始ASR lattices中生成倒排索引结构 第V节详细介绍了ASR结构以及实验使用的数据 第VI节提供了 ...

  7. JDK开发环境配置

    1. 新建 -> 变量名“JAVA_HOME”, 变量值“C:\Program Files\Java\jdk1.8.0_112”(即JDK的安装路径) 2. 编辑 -> 变量名“Path” ...

  8. C++变量/函数命名规范

    ## 参照Google C++编程规范之变量命名 1. 变量 变量名一律小写,单词间以下划线相连.类的成员变量以下划线结尾. 普通变量命名 举例: string window_name; // OK ...

  9. jmeter分布式测试教程和远程的代理机无法连接网络的问题解决方法

    一.Jmeter分布式执行原理: 1.Jmeter分布式测试时,选择其中一台作为控制机(Controller),其它机器做为代理机(Agent). 2.执行时,Controller会把脚本发送到每台A ...

  10. important覆盖行内样式

    优先级,外部样式<内部样式<行内样式,后台富文本编辑器编辑的正文显示在前台时可用!important覆盖其行内样式 今天的问题,font-family:"思源黑体 CN!impo ...