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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 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
Cakephp 执行主要流程
2010/03/24 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
python实现ip查询示例
2014/03/26 Python
Python学习笔记之常用函数及说明
2014/05/23 Python
详解python中的文件与目录操作
2017/07/11 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Sanic框架配置操作分析
2018/07/17 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python str字符串转uuid实例
2020/03/03 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python爬取某平台短视频的方法
2021/02/08 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
往来会计岗位职责
2013/12/19 职场文书
检察官就职演讲稿
2014/01/13 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
被告代理词范文
2015/05/25 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python