原生js代码实现图片放大境效果


Posted in Javascript onOctober 30, 2016

今天我给大家分享一下自己用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>

效果预览:

原生js代码实现图片放大境效果

第二种是直接在原图上放大,像放大镜在上面一样,这是在第一种上的一个扩展,前面的方法没有什么区别,只是最后不需要给它放置一个可视区域,直接在你原来所定放大的区域上显示放大图片,当你修改放大区域的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代码实现图片放大境效果

结语:大家也看到了,其实两种放大方式其实没有什么区别,首先你要获取要放大的区域也就是刚才说的锁定放大区域的矩形和圆形。然后把要放大的图片给定一个区域显示。希望这两段代码对大家有所帮助,谢谢!!!

Javascript 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
js实现文字截断功能
Sep 14 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
vue 组件简介
Jul 31 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Angular2 多级注入器详解及实例
Oct 30 #Javascript
Javascript 跨域知识详细介绍
Oct 30 #Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 #Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 #Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 #Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 #Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 #Javascript
You might like
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
srcElement表格样式
2006/09/03 Javascript
javascript编程起步(第六课)
2007/01/10 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python类的用法实例浅析
2015/05/27 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
百度软件工程师职位
2013/02/14 面试题
四年级学生期末评语
2014/12/26 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
一个都不能少观后感
2015/06/04 职场文书
欠条格式范本
2015/07/03 职场文书
高中信息技术教学反思
2016/02/16 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书