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语言对Unicode字符集的支持详解
Dec 30 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
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
第八节--访问方式
2006/11/16 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
PHP生成plist数据的方法
2015/06/16 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
js下弹出窗口的变通
2007/04/18 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
PageFactory设计模式基于python实现
2020/04/14 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
《自然之道》教学反思
2014/02/11 职场文书
个人委托书格式
2014/04/04 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
php引用传递
2021/04/01 PHP
详解PHP Swoole与TCP三次握手
2021/05/27 PHP