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 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Javascript 实用小技巧
2010/04/07 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
sublime python3 输入换行不结束的方法
2018/04/19 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
django框架cookie和session用法实例详解
2019/12/10 Python
django实现日志按日期分割
2020/05/21 Python
python中_del_还原数据的方法
2020/12/09 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
甜点店创业计划书
2014/01/27 职场文书
服装促销活动方案
2014/02/23 职场文书
大班幼儿评语大全
2014/04/30 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书