分享原生js代码实现图片放大境效果
来源:互联网 发布:淘宝订单支付方式记录 编辑:程序博客网 时间:2024/05/21 14:58
<p>今天我给大家分享一下自己用js写的一个图片放大器效果,我在内涵图网<a target=_blank href="http://www.neipic.com">www.neipic.com</a>做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果。</p><p>第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片。这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果。</p>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>图片放大器</title><style media="screen">*{margin: 0;padding: 0;}/*可视区域的父级标签*/.wrap{width: 400px;height:auto;border: 1px solid black;display: inline-block;position: absolute;left: 0;top: 0;}.wrap>img{width: 100%;height: auto;}/*锁定放大的矩形区域*/.box{border: 1px solid black;width: 100px;height: 100px;background: rgba(0, 0, 0, 0.5);opacity: 0.8;position: absolute;cursor: pointer;display: none;}/*要显示放大图片的父级*/.main{width: 700px;height: 700px;margin-left: 420px;overflow:hidden;display:none;position: absolute;top: 0;}.main>img{width:2800px;height:auto;}</style></head><body><div class="wrap"><img src="dog.jpg" alt="" /><div class="box"></div></div><div class="main"><img src="dog.jpg"alt="" /></div><script type="text/javascript">//获取四个对象var wrap=document.querySelector('.wrap');var box=document.querySelector('.box');var main=document.querySelector('.main');var mainImg=document.querySelector('.main img');//添加移动事件wrap.onmousemove=function(){//鼠标移入可视图片后出现 锁定放大区域及放大图片box.style.display='block';main.style.display='block';var event=window.event || event;//获取鼠标距离可视区域边缘的偏移量var disx=event.clientX-box.offsetWidth/2;var disy=event.clientY-box.offsetHeight/2;//矩形区域的最大可移动范围var distanceMaxX=wrap.offsetWidth-box.offsetWidth;var distanceMaxY=wrap.offsetHeight-box.offsetHeight;// 判断让锁定放大的矩形区域不能出框if (disx<=0) {disx=0;}if (disy<=0) {disy=0;}if(disx>=distanceMaxX) {disx=distanceMaxX;}if(disy>=distanceMaxY) {disy=distanceMaxY;}box.style.left=disx+'px';box.style.top=disy+'px'; //获取放大比例var scalex=box.offsetLeft/distanceMaxX;var scaley=box.offsetTop/distanceMaxY;main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;} //添加移出事件wrap.onmouseout=function(){box.style.display='none';main.style.display='none';}</script></body></html>
效果预览:
0 0
- 分享原生js代码实现图片放大境效果
- 原生js代码实现图片放大境效果
- 原生js代码实现图片放大境效果
- js实现图片轮番效果,原生代码
- 图片局部放大原生js,html代码
- js实现图片的放大效果
- 利用JS实现图片放大效果
- js 实现 图片的局部放大效果
- JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)
- js图片放大效果
- js图片放大效果
- js图片放大效果
- js图片放大效果
- js 图片放大效果
- js 图片放大效果
- 原生JS实现图片轮滚效果
- 原生JS实现图片翻转旋转效果
- 原生JS实现图片的放大镜效果
- STM32标准外设库中USE_STDPERIPH_DRIVER, STM32F10X_MD的含义
- python 异常
- 混合高斯模型GMM
- c# 调取微信扫一扫接口
- LIGHTOJ 1410 - Consistent Verdicts【SET】
- 分享原生js代码实现图片放大境效果
- Java访问权限详解
- iOS:用UIWebView加载网页,退出控制器内存不减,每次加载持续增涨(内存警告)
- CorelDRAW中页面顺序该如何更改和管理
- Flume负载均衡
- 对线性回归、逻辑回归、各种回归的概念学习
- Android开发之自定义控件——直尺
- 东亚王瑜羞辱提示
- linux 虚拟机时间与本地时间相差15分钟解决方法