js实现放大效果
<!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实现放大效果的更多相关文章
- js图片放大效果
实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.
- js hover放大效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 点击弹出 +1放大效果 -- jQuery插件
20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 为BlueLake主题增加图片放大效果
fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
随机推荐
- 数据库MySQL——安装
MySQL 安装 Mysql安装: 1.通过二进制的方式安装 二进制安装方式中,包括rpm版本以及glibc版本. rpm版本就是在特定linux版本下编译的,如果你的linux版本匹配,就可以安装; ...
- 浅析Spring
一:什么是Spring Spring是一个开源的框架,是为了解决企业应用程序开发复杂性由RodJohnson创建的.虽然Spring是为企业级应用推出的,但是所有的Java系统开发都可以使用Sprin ...
- P1996 约瑟夫问题-题解（队列？？明明是单循环链好吗）
一如既往的题目传送: https://www.luogu.org/problemnew/show/P1996 这里不讲数组模拟的方法(毕竟多做点题的模拟功力足以暴力出这道题),而是讲一种单循环 ...
- 制作OpenStack使用的windows镜像
1 安装vmware14 2 创建ubuntu-desktop-16.04虚拟机 选择自定义安装 选择ubuntu-16.04-desktop.iso 内存要大于2G,推荐4G. 磁盘要大于50G 关 ...
- work behind corp proxy
=================================proxy 的写法=================================一般写法是: http://my.proxy.ad ...
- ubuntu工作常用命令及需要留意的点汇总
这段时间比较忙,先是去北京出差一段时间,然后是福建项目部署上线,领导不愿意招人,只苦了我们下面的人,今天得空,简单汇总下ubuntu服务器部署的常用命令,及日常学习使用感受: 0.书籍买的<循序 ...
- NIPS2017-The neural hawks process
NIPS2017哪些论文值得关注 论文链接 1.首先这篇文章研究的是 event stream,什么是event stream呢 ? 假如你是一个医生,你每天会看到很多病人 ,对于每一个病人,你都有他 ...
- Python面向对象之反射
一.反射的基本概念 二.反射示例 三.反射的应用 一.反射的基本概念 反射:可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),Python中一切皆对象,都可以使用反射. 反射有 ...
- MyBatis3
一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下: <?xml version="1 ...
- js下载后台返回的docx（返回格式：文档流）文件
原文地址: https://www.jianshu.com/p/a81c68c15fbd PS需要指定responseType类型,不然文件内容会乱码哦 咦?文件名乱码?需要手动设置文件名哦↓ 呀,文 ...