JS图片放大效果简单实现代码


Posted in Javascript onSeptember 08, 2016

本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 
<title></title>
 
<style type="text/css"> 

#div1 { 


width:300px; 


height:300px; 


position:relative; 


margin:30px auto 0px;

} 

#div1 img{
 

width: 300px;

} 

 #div1 span { 


width:150px; 


height:150px; 


background:red; 


position:absolute;
 

left:0px;
 

top:0px; 


display:none; 


opacity:0.2;

} 

.show { 


width:100%; 


height:100%;
 

background:red;
 

position:absolute;
 

left:0px; top:0px; 


z-index:10px; 


opacity:0.1;

} 

#div2 {
 

width:300px;
 

height:300px; 


position:relative; 


top: -300px;
 

left: 300px;
 

display:none; 


overflow:hidden; 


margin:0px auto 0px;

} 

#img1 { 


position:absolute;

} 

</style> 

</head>

<body>
 

<div id="div1"> 



<!-- 图片 -->



<img src="images/xiangqing.png" alt=""> 



<!-- 鼠标选中框 -->



<span></span> 



<!-- 背景 -->



<div class="show"></div>
 

</div> 


<div id="div2"> 



<!-- 放大后的图片 -->



<img id="img1" src="images/xiangqingda.png" /> 


</div> 
</body>
 <script>


 

// 加载完成后显示

window.onload=function () { 


var oDiv=document.getElementById('div1'); 


var oShow=document.getElementsByClassName('show')[0]; 


var oSpan=document.getElementsByTagName('span')[0]; 


var oImg=document.getElementById('img1');
 

// parentNode获得父节点
 

oShow.onmouseover=function() { 


oSpan.style.display='block'; 


oImg.parentNode.style.display='block'; 


}; 


oShow.onmouseout=function() { 



oSpan.style.display=''; 



oImg.parentNode.style.display=''; 


}; 


// 放大器移动
 

oShow.onmousemove=function(ev) { 


// 解决浏览器兼容问题
 

var oEvent=ev||event;


// 获得鼠标的位置
 

var x=oEvent.offsetX-oSpan.offsetWidth/2; 


var y=oEvent.offsetY-oSpan.offsetHeight/2;



// console.log(oEvent.clientY);


// console.log(oDiv.offsetTop);


// console.log(oSpan.offsetHeight/2);


// console.log(oEvent.clientY);
 


if(x<0) { 



x=0; 


} else if(x>oShow.offsetWidth-oSpan.offsetWidth) { 



x=oShow.offsetWidth-oSpan.offsetWidth; 


} if(y<0) { 



y=0; 


} else if(y>oShow.offsetHeight-oSpan.offsetHeight) { 



y=oShow.offsetHeight-oSpan.offsetHeight;


} 


// 给选中框定位
 

oSpan.style.left=x+'px'; 


oSpan.style.top=y+'px'; 


// 给放大器定位
 

var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); 


var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); 


var oImgparent=oImg.parentNode; 


oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; 


oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; 

}; 
};


</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSONP 跨域共享信息
Aug 16 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 #Javascript
利用Vue.js指令实现全选功能
Sep 08 #Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 #Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 #Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 #Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 #Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 #Javascript
You might like
php入门之连接mysql数据库的一个类
2012/04/21 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
Yii2中datetime类的使用
2016/12/17 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
python的id()函数介绍
2013/02/10 Python
pycharm 使用心得(四)显示行号
2014/06/05 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python实现飞机大战小游戏
2019/11/08 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
青年标兵事迹材料
2014/08/16 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
公司岗位说明书
2015/10/08 职场文书
旅游安全责任协议书
2016/03/22 职场文书