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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
RxJS在TypeScript中的简单使用详解
Apr 13 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
python pygame实现2048游戏
2018/11/20 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
应届生英语教师求职信
2013/11/05 职场文书
食堂员工工作职责
2013/12/18 职场文书
迎接领导欢迎词
2014/01/11 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
教室标语大全
2014/06/21 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
工程承包协议书范本
2014/09/29 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers