原生js代码实现图片放大境效果
hello 大家好! 这是我的第一篇博客文章,感谢大家前来阅读,希望我们都能在这个平台上相互交流、共同进步、查漏补缺。
今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果。第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片。这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果。
<!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>
效果预览:
第二种是直接在原图上放大,像放大镜在上面一样,这是在第一种上的一个扩展,前面的方法没有什么区别,只是最后不需要给它放置一个可视区域,直接在你原来所定放大的区域上显示放大图片,当你修改放大区域的left和top值时同时自动修改图片相应的left和top值,实现同步放大效果。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>放大镜</title><style type="text/css">.main{width: 500px;height: 570px;border: 2px solid black;position: relative;/*overflow: hidden;*/}#img1{width: 100%;height: 100%;}.box{width: 200px;height: 200px;border-radius: 200px;/*border: 1px solid black;*/display: none;position: absolute;overflow: hidden;cursor:move;}//放大图片 给绝对定位让移动时它也能跟着移动实现和我们锁定的区域同步#img2{width: 1200px;height: 1400px;position: absolute;/*left: 0;top: 0;*//*display: none;*/}</style></head><body><div class="main"><img id="img1" src="dog.jpg"/><div class="box"><img id="img2" src="dog.jpg"/></div></div></body>
</html>
<script type="text/javascript">var main=document.querySelector('.main');var box=document.querySelector('.box');var boximg=document.querySelector('#img2');//添加鼠标移动事件main.addEventListener('mousemove',move,false);function move(){//显示放大的圆形区域box.style.display='block';var event=window.event||event;//获取鼠标距离可视区域边缘的偏移量var disx=event.clientX-box.offsetWidth/2;var disy=event.clientY-box.offsetHeight/2;var dismax=main.offsetWidth-box.offsetWidth;var dismay=main.offsetHeight-box.offsetHeight;//矩形区域的最大可移动范围if (disx<=0) {disx=0;}if (disx>=dismax) {disx=dismax-2;}if(disy<=0){disy=0;}if(disy>=dismay){disy=dismay-2;}//当你移动的时候修改圆形区域的left以及 top值。box.style.left=disx+'px';box.style.top=disy+'px';
// var scalx=main.offsetWidth/box.offsetWidth
// var scaly=main.offsetHeight/box.offsetHeight;//同理当你移动时放大的图片它的图片也要修改left和top值boximg.style.left=-event.clientX*2+'px';boximg.style.top=-event.clientY*2+'px';
// box.scrollLeft=(boximg.offsetWidth-box.offsetWidth);
// box.scrollTop=(boximg.offsetHeight-box.offsetHeight);}
// 添加鼠标移出事件main.addEventListener('mouseout',out,false);function out(){box.style.display='none';}
</script>
效果预览:
结语:大家也看到了,其实两种放大方式其实没有什么区别,首先你要获取要放大的区域也就是刚才说的锁定放大区域的矩形和圆形。然后把要放大的图片给定一个区域显示。希望这两段代码对大家有所帮助,谢谢!!!
原生js代码实现图片放大境效果相关推荐
- 分享原生js代码实现图片放大境效果
<p>今天我给大家分享一下自己用js写的一个图片放大器效果,我在内涵图网<a target=_blank href="http://www.neipic.com" ...
- php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点 实现原理: 1.点击楼层跳相应楼层,用的是锚点定位 电梯:2F 个护家清 列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示 我们的脚本主要就是实现这个功能. ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- js html css 图片跑马灯效果(轮播)
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
- html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...
- 图片放大缩小效果,支持鼠标滑轮
图片放大缩小效果 效果在附件里,麻烦下载来看吧 <html> <head><title>Simple jsp page</title><link ...
- js中的图片指定切换效果
js中的图片指定切换效果的实现 用到的js中的知识:js中的for循环的熟练运用 js中的this属性:指的是调用当前 方法 (函数) 的那个对象 js中的自定义属性:js可以为任意的HTML元素添加 ...
- 原生js代码编写钟表
原生js代码编写钟表 利用js中的定时器编写: 直接上代码: <!DOCTYPE html> <html><head><meta charset=" ...
- 【Axure交互教程】滑块控制图片放大缩小效果
作品名称:滑块控制图片放大缩小效果 作品编号:Case007 软件版本:Axure9 作品类型:交互案例 原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...
最新文章
- 知道这20个正则表达式,能让你少写1,000行代码
- 浮点与定点的二进制存储
- 【hadoop】hadoop 安装 kerberos
- hdu1251(trie树)
- 开发者如何在一周从入门级到专家级别的修炼
- 基于STM32F429的AD9833-DDS程序
- Windows的CMD的NET命令net start , net stop ...
- CSS border设置虚线可调节虚线间距
- mysql root权限_如何设置Mysql root权限
- win7计算机开机黑屏解决办法参考
- js定义函数的两种形式及区别
- 0667-6.2.0-什么是Cloudera虚拟私有集群和SDX
- Textual Entailment(自然语言推理-文本蕴含) - AllenNLP
- mysql数据库,使用substring函数截取字符串返回空问题
- 计算机辅助教育相关论文,教学计算机辅助论文,关于计算机辅助教学在现代教育改革中的作用相关参考文献资料-免费论文范文...
- 给input date设置默认值
- 【惊】Spring源码的秘密|一起看看Spring启动时究竟做了什么惊天动地的事情?
- 读《微波工程(第三版)》笔记 (4:波方程和基本平面波的解)
- 3dmax建模模式下的选择--循环选择
- Ununtu 18.04 安装Carla 0.9.13 以及Carla ros bridge 超级避坑指南(更新于2022.10.20)