JS图片放大效果简单实现代码
更新时间：2016年09月08日 16:08:04 作者：剑出。花残
这篇文章主要为大家详细介绍了JS实现图片放大效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了webpack的懒加载和预加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了js图数据结构处理 迪杰斯特拉算法代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JavaScript实现数字前补“0”的五种方法,结合具体实例形式分析了javascript数字前补0的相关操作技巧,涉及javascript字符串遍历、迭代、截取、构造等操作,需要的朋友可以参考下2019-01-01
最近在面试的时候又被问到JS中检查校验数据类型的方法,所以这篇文章主要给大家介绍了关于javaScript中一些常见的数据类型检查校验的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了javascript实现fetch请求返回的统一拦截,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要给大家介绍了关于ios中视频的最后一桢问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要为大家详细介绍了iSlider手机端图片滑动切换插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
本文主要介绍了微信小程序中使用vant框架的具体步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
DOM3中引入了文本事件，其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。2011-04-04
这篇文章主要为大家详细解析了bootstrap滚动监控器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
最新评论