javascript图片放大镜效果展示

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
img {
vertical-align: top;
}
</style> <script src="animate.js"></script>
<script>
window.onload = function () {
//需求:鼠标放到小盒子上,让大盒子里面的图片和我们同步等比例移动。
//技术点:onmouseenter==onmouseover 第一个不冒泡
//技术点:onmouseleave==onmouseout 第一个不冒泡
//步骤:
//1.鼠标放上去显示盒子,移开隐藏盒子。
//2.老三步和新五步(黄盒子跟随移动)
//3.右侧的大图片,等比例移动。 //0.获取相关元素
var box = document.getElementsByClassName("box")[0];
var small = box.firstElementChild || box.firstChild;
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0]; //1.鼠标放上去显示盒子,移开隐藏盒子。(为小盒子绑定事件)
small.onmouseenter = function () {
//封装好方法调用:显示元素
show(mask);
show(big);
}
small.onmouseleave = function () {
//封装好方法调用:隐藏元素
hide(mask);
hide(big);
} //2.老三步和新五步(黄盒子跟随移动)
//绑定的事件是onmousemove,而事件源是small(只要在小盒子上移动1像素,黄盒子也要跟随)
small.onmousemove = function (event) {
//想移动黄盒子,必须知道鼠标在small中的位置。x作为mask的left值,y作mask的top值。
//新五步
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
//让鼠标在黄盒子最中间,减去黄盒子宽高的一半
var x = pagex - box.offsetLeft - mask.offsetWidth/2;
var y = pagey - box.offsetTop - mask.offsetHeight/2;
//限制换盒子的范围
//left取值为大于0,小盒子的宽-mask的宽。
if(x<0){
x = 0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x = small.offsetWidth-mask.offsetWidth;
}
//top同理。
if(y<0){
y = 0;
}
if(y>small.offsetHeight-mask.offsetHeight){
y = small.offsetHeight-mask.offsetHeight;
}
//移动黄盒子
console.log(small.offsetHeight);
mask.style.left = x + "px";
mask.style.top = y + "px"; //3.右侧的大图片,等比例移动。
//如何移动大图片?等比例移动。
// 大图片/大盒子 = 小图片/mask盒子
// 大图片走的距离/mask走的距离 = (大图片-大盒子)/(小图片-黄盒子)
// var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth); //大图片走的距离/mask盒子都的距离 = 大图片/小图片
var bili = bigImg.offsetWidth/small.offsetWidth; var xx = bili*x;
var yy = bili*y; bigImg.style.marginTop = -yy+"px";
bigImg.style.marginLeft = -xx+"px";
} }
</script>
</head>
<body>
<div class="box">
<div class="small">
<img src="data:images/001.jpg" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="data:images/0001.jpg" alt=""/>
</div>
</div>
</body>
</html>

  javascript引出

//显示
function show(ele){
ele.style.display="block";
} //隐藏
function hide(ele){
ele.style.display="none";
} //动画效果的基本原理
function animate(ele,target){
clearInterval(ele.timer); ele.timer=setInterval(function(){ var step=(target-ele.offsetTop)/10; step=step>0?Math.ceil(step):Math.floor(step); ele.style.top=ele.offsetTop+step+"px"; if (Math.abs(target-ele.offsetTop)<Math.abs(step)) {
ele.style.top=target+"px";
clearInterval(ele.timer);
} },25) } function scroll(){
if (window.pageYOffset!=null) { return{
left:window.pageXOffset,
top:window.pageYOffset
} }else if (document.compatMode==="Css1compat") {
return{
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{
return{
left:document.body.scrollLeft,
top:document.body.scrollTop
} } }

  

javascript图片放大镜效果展示的更多相关文章

  1. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  4. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

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

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

  6. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  7. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  8. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas知识02:图片放大镜效果

    效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...

随机推荐

  1. UVA10410 TreeReconstruction 树重建 (dfs,bfs序的一些性质,以及用栈处理递归 )

    题意,给你一颗树的bfs序和dfs序,结点编号小的优先历遍,问你可能的一种树形: 输出每个结点的子结点. 注意到以下事实: (1)dfs序中一个结点的子树结点一定是连续的. (2)bfs,dfs序中的 ...

  2. Beta版本发布

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/?page=2 这个作业要求在哪里 <作业要求的 ...

  3. caffe parse_log.sh

    画loss曲线需要用到此shell脚本 #!/bin/bash # Usage parse_log.sh caffe.log # It creates the following two text f ...

  4. vs2015驱动开发中使用RtlStringCchPrintfW()报错

    法一: 在头顶添加一段代码 #pragam comment(lib,"xxxxxx.lib") 法二: 右击工程点属性,选择Linker下的Input,在依赖项后面写上$(DDK_ ...

  5. 中英文字符串截取函数msubstr

    Thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便.调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用. 比如今天我们说的截 ...

  6. HTML5<header>元素

    HTML5<header>元素 1.header元素描述了文档的头部区域,主要用于定义内容的介绍展示区域. 2.实例: <header> <h2>heder元素描述 ...

  7. Swift开发中 JSON对象/JSON字符串/Data的互转

    本文将介绍Swift开发中常用的转换(JSON对象/JSON字符串/Data之间的互相转换) #pragma mark - JSON(对象)----->JSON字符串 1.原生方法 //JSON ...

  8. 『jQuery』.html(),.text()和.val()的概述及使用--2015-08-11

    如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法   本节内容主要介绍的是如何使用jQu ...

  9. js中charAt()与charCodeAt()区别

    1. str.charAt(index); 返回指定位置的字符 字符串中第一个字符的下标是 0.如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串. ind ...

  10. 【交互 细节题 思维题】cf1064E. Dwarves, Hats and Extrasensory Abilities

    第一次做交互真有趣……:挺好的细节思维题 This is an interactive problem. In good old times dwarves tried to develop extr ...