JavaScript--放大镜
上例图：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} .box {
width: 350px;
height: 467px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
/*overflow: hidden;*/
} .big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
/*display: none;*/
opacity: 0.1;
z-index: -1;
/*transform: translateX(-500px) scale(0);*/
transition: all .4s;
} .mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
} .small {
position: relative;
}
.box:hover .mask{
display: block;
}
.box:hover .big{
transform: translateX(0px) scale(1);
opacity: 1;
z-index: 1;
/*display: block;*/
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small"><!--小层-->
<img src="img/small2.jpg" width="350" alt=""/>
<div class="mask" id="mask"></div><!--遮挡层-->
</div>
<div class="big" id="big"><!--大层-->
<img src="img/big2.jpg" width="800" alt=""/><!--大图-->
</div>
</div>
</body>
</html>
<script>
/*以下注释的代码用CSS代替了*/
// var box = document.getElementById("box");
// var mask = document.getElementById("mask");
// var big = document.getElementById("big"); // box.onmouseover = function () {
// mask.style.display = "block";
// big.style.display = "block";
// }
// box.onmouseout = function () {
// mask.style.display = "none";
// big.style.display = "none";
// } /**
* 1.鼠标移上大分区，遮罩层和大图显示
* 2.鼠标移出大分区，遮罩层和大图隐藏
* 3.鼠标在大分区内移动的时候，遮罩层跟鼠标移动，大图也跟着移动
* */ var box = document.getElementById("box");
var mask = document.getElementById("mask");
var bigImg = document.getElementById("big").children[0];
box.onmousemove = function (event) {
var pageX = event.pageX;
var pageY = event.pageY;
// 数据有了，我们希望盒子跟着鼠标走
// 由于盒子是绝对定位，所以基于页面获取到的坐标要做处理
// 目标数据 = 鼠标在页面的坐标 - 大盒子距离页面的坐标
var boxOffsetLeft = box.offsetLeft ;
var boxOffsetTop = box.offsetTop;
var boxOffsetWidth = box.offsetWidth;
var boxOffsetHeight = box.offsetHeight; var maskOffsetWidth = mask.offsetWidth;
var maskOffseetHeight = mask.offsetHeight;
// 让鼠标在mask盒子中心拖拽移动
var mX = pageX - boxOffsetLeft -maskOffsetWidth/2;
var mY = pageY - boxOffsetTop - maskOffseetHeight/2;
// 以下判断mask盒子是否越出父盒子
if(mX < 0) {
mX = 0 ;
}
if(mY < 0) {
mY = 0 ;
}
if(mX > boxOffsetWidth - maskOffsetWidth) {
mX = boxOffsetWidth -maskOffsetWidth;
}
if(mY > boxOffsetHeight - maskOffseetHeight) {
mY = boxOffsetHeight - maskOffseetHeight;
}
// 设置mask盒子位置
mask.style.left = mX + "px";
mask.style.top = mY + "px";
// 获取比例设置大图等比例的位置
var bili = bigImg.offsetWidth/boxOffsetWidth;
bigImg.style.marginLeft = -mX*bili + "px";
bigImg.style.marginTop = -mY*bili + "px"; } </script>
JavaScript--放大镜的更多相关文章
- javascript放大镜效果
JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...
- JavaScript之放大镜效果
在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...
- 【JavaScript】放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js
拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...
- JavaScript之放大镜效果2
在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- javascript 实现图片放大镜功能
淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
随机推荐
- windwos API 第七篇 分离路径，组合路径 _splitpath _makepath
函数原型: //Break a path name into components. void _splitpath( const char *path, char *drive, char *dir ...
- hdu4764
hdu4764bash博弈主要是找准必胜状态,以及好好理解题意.这里的必胜状态是n-1,虽然是写的数比上一个大1到k,但是相当于这个人拿1到k,然后是累加的效果 #include<iostrea ...
- 子类A继承父类B, A a = new A(); 则父类B构造函数、父类B静态代码块、父类B非静态代码块、子类A构造函数、子类A静态代码块、子类A非静态代码块 执行的先后顺序是
按照先后顺序: 1,静态先于非静态代码库执行(静态代码块随着类的加载而加载,初始化只执行一次) 2,父类先于子类 3,非静态代码块优于构造函数执行 所以执行顺序如下: 父类B静态代码块->子类A ...
- 洛谷P2333 [SCOI2006]一孔之见
传送门 辣鸡题目毁我人生败我前程 50分代码 //Achen #include<algorithm> #include<iostream> #include<cstrin ...
- idea报错：Error：java不支持发行版本5的解决方法
将以下对应配置一致即可. File-->Project Structure File-->Settings
- Python的几个高级编程技巧
Python有一些技巧对你来说是新知识,但是还有一些技巧会让你的代码效率大幅提升. 本文总结了一下自己用到的一些Python高级编程技巧,希望对大家有帮助. 列表生成器 a=[1,2,3] [x*x ...
- java随机生成字符串工具类
package aA; import java.util.ArrayList; import java.util.Arrays; import java.util.Random; /** * 字符随机 ...
- HDFS FsImage文件
- ubuntu下搜狗输入法待选框中文乱码问题解决（重启搜狗输入法）
简单的三个命令就可以解决 killall fcitx //关闭fcitx killall sogou-qimpanel //关闭搜狗输入法 fcitx //打开fcitx
- DevCloud会员权益升级！日常领码豆，轻松换好礼！
为了回馈每一位用户的使用和支持, 华为云DevCloud上线了会员中心, 大家在会员中心可以通过完成任务赚取码豆, 并在兑换商城兑换精美礼品. 如何通过任务获得码豆? 我们为大家准备了各种日常任务, ...