JavaScript–图片放大镜
文章转自于:http://www.cnblogs.com/Ayinger/p/6890470.html
图片放大镜的原理:
两张相同的图片img1和img2,img1上有一个#dd的div,通过鼠标移动dd,根据dd区域内的图片,来裁剪img2的图片,并将img2的图片放大,显示出来
关键词:img1坐标,img2裁剪,img2放大
实现图片的放大效果,一共分为6步:
1. 为img1添加鼠标事件
2. 鼠标进入时dd显示,鼠标移出时dd隐藏
3. 获得鼠标的坐标 mouseX,mouseY
4. dd随鼠标的移动而移动
5. 对img2进行裁图处理 clip=“rect(top,width,height,left)”
6. 将img2图片放大
公式:left=(width-倍数*mouseX)/倍数+x
<!DOCTYPE html><html>
<head>
<title>图片放大镜</title>
<style type="text/css">
#img1{
width: 322px;
height: 300px;
position: absolute;
top: 10px;
left: 10px;
}
#img2 {
width: 322px;
height: 300px;
position: absolute;
top: 10px;
left: 340px;display:none;}
#dd {
width: 100px;
height: 60px;
border: 2px solid #f60;
position: absolute;
top: 10px;
left: 10px;}
</style></head><body><img id="img1" src="data:images/10.jpg" />
<div id="dd"></div>
<img id="img2" src="data:images/10.jpg" />
</body>
<script>// 1 为img1添加鼠标事件
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var dd = document.getElementById("dd");
img1.addEventListener("mouseover",function(){// 2 鼠标进入dd显示
dd.style.display="";img2.style.display="block";// 3 获取鼠标的坐标
var mouseX= event.clientX;//获得鼠标在可视窗口的横坐标
var mouseY= event.clientY;// 4 dd随鼠标而移动// 注意:-50,-30可以使鼠标在dd的中间位置
dd.style.left = mouseX-50+"px";
dd.style.top =mouseY-30+"px";// 5 对img2进行裁图 clip="rect(top,width,height,left)"
var rtop = mouseY-10-30;/鼠标的横坐标-img2的top-dd的height/2
var rleft= mouseX-10-50;//鼠标的纵坐标-img2的left-dd的width/2;
var rwidth =rleft+100;
var rheight= rtop+60;
img2.style.clip="rect("+rtop+"px,"+rwidth+"px,"+rheight+"px,"+rleft+"px)";// 6 将img2图片放大//公式left=(width-倍数*mouseX)/倍数+x; top=10-mouseY+y;
img2.style.zoom =2;//图片扩大2倍
img2.style.left= (322-2*mouseX)/2+70+"px";
img2.style.top=10-mouseY+40+"px";
},false);img1.addEventListener("mouseout",function(){//2 鼠标移出dd隐藏
dd.style.display="none";
},false);
</script></html>
JavaScript–图片放大镜相关推荐
- javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 【小5聊】纯javascript实现图片放大镜效果
实现图片放大镜效果,其实就是一个比例放大的效果 以下通过纯javascript方式对图片进行等比例放大,等比倍数和出界判断可自行实现 文章后面会附上全部代码 放大镜效果 1. 放大镜组成 1)目标图 ...
- jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件Magnify放大镜实现javascript图片放大功能 博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源:http://www.biuuu.com/?p=459 有时 ...
- 十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
- [js开源组件开发]图片放大镜
图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...
- 介绍一个十分好用的JQUERY图片放大镜插件
介绍一个十分好用的JQUERY图片放大镜插件 介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL, ...
- 基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果 描述:右侧图片必须是左侧图片的倍数大,主要是获取鼠标相对与被触发元素的坐标位置,再通过位置定位实现效果 <!DOCTYPE html> <ht ...
- Jquery图片放大镜效果
介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL,所以找到了这个插件, 插件下载地址: http ...
- Jquery的jqzoom插件的使用(图片放大镜)
今天学习一下,图片放大镜功能,需要使用插件JQzoom 引入文件 <script type="text/javascript" src="js/jquery.min ...
最新文章
- 如何用Pandas处理文本数据?
- AMD and CMD are dead之KMD.js版本0.0.2发布
- k8s pod重启策略:Always、OnFailure、Never配置示例
- mysql语句执行顺序
- java writeboolean_Java DataOutputStream writeBoolean()方法(带示例)
- windows oracle 内存大,如何设计Oracle数据库内存的大小
- ROS launch文件
- 五个案例让你明白GCD死锁
- created写法_vue.js中created方法作用
- 用 bmon 实时查看网络流量
- HTTP权威指南-概述
- win10-如何管理开机启动项?
- 按键精灵操作mysql数据库_按键精灵mysql数据库
- 深搜(不撞南墙不回头),迷宫问题
- 关于语音特征提取(MFCC)的matlab相关函数
- <video>标签及属性说明
- springboot昆明学院档案管理系统毕业设计源码311758
- 从《战狼2》看吴京:选对方向、做对事
- 腾讯前端常考面试题汇总
- js前端判断登录超时即清除登录状态
热门文章
- 关于LayoutInflater.from(context).inflate()的使用的问题
- 女生直接问你你真棒什么意思_你的意思在哪里?
- 并查集详解:UF——UF_Tree——UF_Tree_Weighted逐步优化
- Java反射之创建对象的四种方式
- C语言rand()函数重置种子问题
- 安恒西湖论剑线下上午CTF部分题目WP
- DD-WRT端口绑定两个端口合并带宽
- 十条最佳上云法则,助你安全无痛上云!
- 富琪整装产业园与动点网络成功签约三网合一网站建设项目
- 《公共部门人力资源管理》考题2023春季