JavaScript图片放大技术的实现-js教程-PHP中文网

首页

web前端

js教程

JavaScript图片放大技术的实现

不言

Jun 26, 2018 am 09:46 AM

javascript图片放大放大镜

这篇文章介绍了JavaScript图片放大技术(放大镜)实现代码，有需要的朋友可以参考一下

具体代码如下：

<!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图片放大技术(放大镜)实现代码分享 - www.jb51.net</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 { &#39;x&#39;:x,&#39;y&#39;:y }; 
} 
function setOpacity(elem,level) {//兼容浏览器设置透明值 
    if(elem.filters) { 
        elem.style.filter = &#39;alpha(opacity=&#39; + level * 100 + &#39;)&#39;; 
    } else { 
        elem.style.opacity = level; 
    } 
} 
function css(elem,prop) {   //css设置函数,可以方便设置css值,并且兼容设置透明值 
    for(var i in prop) { 
        if(i == &#39;opacity&#39;) { 
            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,    //装载原始图像的p 
            img : null, //放大的图像 
            mag : null, //放大框 
            scale : 15  //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决 
        } 
        css(m.img,{  
            &#39;position&#39; : &#39;absolute&#39;, 
            &#39;width&#39; : (m.cont.clientWidth * m.scale) + &#39;px&#39;,                //原始图像的宽*比例值     
            &#39;height&#39; : (m.cont.clientHeight * m.scale) + &#39;px&#39;               //原始图像的高*比例值 
            }) 
        css(m.mag,{ 
            &#39;display&#39; : &#39;none&#39;, 
            &#39;width&#39; : m.cont.clientWidth + &#39;px&#39;,    //m.cont为原始图像,与原始图像等宽 
            &#39;height&#39; : m.cont.clientHeight + &#39;px&#39;, 
            &#39;position&#39; : &#39;absolute&#39;, 
            &#39;left&#39; : m.cont.offsetLeft + m.cont.offsetWidth + 10 + &#39;px&#39;,//放大框的位置为原始图像的右方远10px 
            &#39;top&#39; : m.cont.offsetTop + &#39;px&#39;
            }) 
        var borderWid = m.cont.getElementsByTagName(&#39;p&#39;)[0].offsetWidth - m.cont.getElementsByTagName(&#39;p&#39;)[0].clientWidth;      //获取border的宽 
        css(m.cont.getElementsByTagName(&#39;p&#39;)[0],{         //m.cont.getElementsByTagName(&#39;p&#39;)[0]为浏览框 
            &#39;display&#39; : &#39;none&#39;,                             //开始设置为不可见 
            &#39;width&#39; : m.cont.clientWidth / m.scale - borderWid + &#39;px&#39;,          //原始图片的宽/比例值 - border的宽度 
            &#39;height&#39; : m.cont.clientHeight / m.scale - borderWid + &#39;px&#39;,//原始图片的高/比例值 - border的宽度 
            &#39;opacity&#39; : 0.5//设置透明度 
            }) 
        m.img.src = m.cont.getElementsByTagName(&#39;img&#39;)[0].src;//让原始图像的src值给予放大图像 
        m.cont.style.cursor = &#39;crosshair&#39;; 
        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(&#39;p&#39;)[0].style.display = &#39;&#39;; 
        css(this.getElementsByTagName(&#39;p&#39;)[0],{ 
            &#39;top&#39; : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName(&#39;p&#39;)[0].offsetHeight) + &#39;px&#39;, 
            &#39;left&#39; : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName(&#39;p&#39;)[0].offsetWidth) + &#39;px&#39;            //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像 
            }) 
        magnifier.m.mag.style.display = &#39;&#39;; 
        css(magnifier.m.img,{ 
            &#39;top&#39; : - (parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.top) * magnifier.m.scale) + &#39;px&#39;, 
            &#39;left&#39; : - (parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.left) * magnifier.m.scale) + &#39;px&#39;
            }) 
    }, 
    end:function(e){ 
        this.getElementsByTagName(&#39;p&#39;)[0].style.display = &#39;none&#39;; 
        magnifier.removeIframe(magnifier.m.img);        //销毁iframe 
        magnifier.m.mag.style.display = &#39;none&#39;; 
    }, 
    createIframe:function(elem){ 
        var layer = document.createElement(&#39;iframe&#39;); 
        layer.tabIndex = &#39;-1&#39;; 
        layer.src = &#39;javascript:false;&#39;; 
        elem.parentNode.appendChild(layer); 
        layer.style.width = elem.offsetWidth + &#39;px&#39;; 
        layer.style.height = elem.offsetHeight + &#39;px&#39;; 
    }, 
    removeIframe:function(elem){ 
        var layers = elem.parentNode.getElementsByTagName(&#39;iframe&#39;); 
        while(layers.length >0){ 
            layers[0].parentNode.removeChild(layers[0]); 
        } 
    } 
} 
window.onload = function(){ 
    magnifier.init({ 
                   cont : document.getElementById(&#39;magnifier&#39;), 
                   img : document.getElementById(&#39;magnifierImg&#39;), 
                   mag : document.getElementById(&#39;mag&#39;), 
                   scale : 3 
                   }); 
} 
</script> 
</head> 
<body> 
<p id="magnifier"> 
<img src="//www.jb51.net/images/20091107/fangda.jpg" id="img" /> 
<p id="Browser"></p> 
</p> 
<p id="mag"><img id="magnifierImg" /></p> 
<select style="position:absolute;top:200px;left:650px;width:100px;"> 
<option>select测试</option> 
<option>是否能覆盖</option> 
</select> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何利用JS实现仿微信支付弹窗功能

javascript实现瀑布流动态加载图片

JavaScript实现使用Canvas绘制图形

以上是JavaScript图片放大技术的实现的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。