JavaScript图片放大技术(放大镜)实现代码分享


Posted in Javascript onNovember 14, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript图片放大技术(放大镜)实现代码分享 - 3water.com</title> 
<style type="text/css"> 
#magnifier{ 
    width:342px; 
    height:420px; 
    position:absolute; 
    top:100px; 
    left:250px; 
    font-size:0; 
    border:1px solid #000; 
} 
#img{ 
    width:342px; 
    height:420px; 
} 
#Browser{ 
    border:1px solid #000; 
    z-index:100; 
    position:absolute; 
    background:#555; 
} 
#mag{ 
    border:1px solid #000; 
    overflow:hidden; 
    z-index:100; 
} 
</style> 
<script type="text/javascript"> 
function getEventObject(W3CEvent) {//事件标准化函数 
    return W3CEvent || window.event; 
} 
function getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数 
    e = e || getEventObject(e); 
    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); 
    var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));     return { 'x':x,'y':y }; 
} 
function setOpacity(elem,level) {//兼容浏览器设置透明值 
    if(elem.filters) { 
        elem.style.filter = 'alpha(opacity=' + level * 100 + ')'; 
    } else { 
        elem.style.opacity = level; 
    } 
} 
function css(elem,prop) {   //css设置函数,可以方便设置css值,并且兼容设置透明值 
    for(var i in prop) { 
        if(i == 'opacity') { 
            setOpacity(elem,prop[i]); 
        } else { 
            elem.style[i] = prop[i]; 
        } 
    } 
    return elem; 
} 
var magnifier = { 
    m : null, 
    init:function(magni){ 
        var m = this.m = magni || { 
            cont : null,    //装载原始图像的div 
            img : null, //放大的图像 
            mag : null, //放大框 
            scale : 15  //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决 
        } 
        css(m.img,{  
            'position' : 'absolute', 
            'width' : (m.cont.clientWidth * m.scale) + 'px',                //原始图像的宽*比例值     
            'height' : (m.cont.clientHeight * m.scale) + 'px'               //原始图像的高*比例值 
            }) 
        css(m.mag,{ 
            'display' : 'none', 
            'width' : m.cont.clientWidth + 'px',    //m.cont为原始图像,与原始图像等宽 
            'height' : m.cont.clientHeight + 'px', 
            'position' : 'absolute', 
            'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//放大框的位置为原始图像的右方远10px 
            'top' : m.cont.offsetTop + 'px'
            }) 
        var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth;      //获取border的宽 
        css(m.cont.getElementsByTagName('div')[0],{         //m.cont.getElementsByTagName('div')[0]为浏览框 
            'display' : 'none',                             //开始设置为不可见 
            'width' : m.cont.clientWidth / m.scale - borderWid + 'px',          //原始图片的宽/比例值 - border的宽度 
            'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//原始图片的高/比例值 - border的宽度 
            'opacity' : 0.5//设置透明度 
            }) 
        m.img.src = m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大图像 
        m.cont.style.cursor = 'crosshair'; 
        m.cont.onmouseover = magnifier.start; 
    }, 
    start:function(e){ 
        if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖 
            magnifier.createIframe(magnifier.m.img); 
        } 
        this.onmousemove = magnifier.move;//this指向m.cont 
        this.onmouseout = magnifier.end; 
    }, 
    move:function(e){ 
        var pos = getPointerPosition(e);        //事件标准化 
        this.getElementsByTagName('div')[0].style.display = ''; 
        css(this.getElementsByTagName('div')[0],{ 
            'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px', 
            'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px'            //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像 
            }) 
        magnifier.m.mag.style.display = ''; 
        css(magnifier.m.img,{ 
            'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px', 
            'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
            }) 
    }, 
    end:function(e){ 
        this.getElementsByTagName('div')[0].style.display = 'none'; 
        magnifier.removeIframe(magnifier.m.img);        //销毁iframe 
        magnifier.m.mag.style.display = 'none'; 
    }, 
    createIframe:function(elem){ 
        var layer = document.createElement('iframe'); 
        layer.tabIndex = '-1'; 
        layer.src = 'javascript:false;'; 
        elem.parentNode.appendChild(layer); 
        layer.style.width = elem.offsetWidth + 'px'; 
        layer.style.height = elem.offsetHeight + 'px'; 
    }, 
    removeIframe:function(elem){ 
        var layers = elem.parentNode.getElementsByTagName('iframe'); 
        while(layers.length >0){ 
            layers[0].parentNode.removeChild(layers[0]); 
        } 
    } 
} 
window.onload = function(){ 
    magnifier.init({ 
                   cont : document.getElementById('magnifier'), 
                   img : document.getElementById('magnifierImg'), 
                   mag : document.getElementById('mag'), 
                   scale : 3 
                   }); 
} 
</script> 
</head> 
<body> 
<div id="magnifier"> 
<img src="https://3water.com/images/20091107/fangda.jpg" id="img" /> 
<div id="Browser"></div> 
</div> 
<div id="mag"><img id="magnifierImg" /></div> 
<select style="position:absolute;top:200px;left:650px;width:100px;"> 
<option>select测试</option> 
<option>是否能覆盖</option> 
</select> 
</body> 
</html>
Javascript 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
小程序关于请求同步的总结
May 05 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
JS获取农历日期具体实例
Nov 14 #Javascript
提高jQuery性能的十个诀窍
Nov 14 #Javascript
优化Jquery,提升网页加载速度
Nov 14 #Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 #Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 #Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 #Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
js的一些常用方法小结
2011/06/29 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python解析json文件相关知识学习
2016/03/01 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
python实现倒计时小工具
2019/07/29 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
旅游文化节策划方案
2014/06/06 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
开场白怎么写
2015/06/01 职场文书
三八节活动主持词
2015/07/04 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电