编程 Javascript

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>

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

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

- Author -

剑出。花残

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript第一课

Feb 27 Javascript

js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器

May 21 Javascript

JavaScript头像上传插件源码分享

Mar 29 Javascript

seajs学习教程之基础篇

Oct 20 Javascript

webpack 1.x升级过程中的踩坑总结大全

Aug 09 Javascript

AngularJS中table表格基本操作示例

Oct 10 Javascript

Makefile/cmake/node-gyp中区分判断不同平台的方法

Dec 18 Javascript

ES6中的class是如何实现的(附Babel编译的ES5代码详解)

May 17 Javascript

微信小程序跨页面数据传递事件响应实现过程解析

Dec 19 Javascript

node.JS路径解析之PATH模块使用方法详解

Feb 06 Javascript

Javascript模块化机制实现原理详解

Apr 02 Javascript

微信小程序点击滚动到指定位置的实现

May 22 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