`
kimmking
  • 浏览: 546814 次
  • 性别: Icon_minigender_1
  • 来自: 中华大丈夫学院
社区版块
存档分类
最新评论

局部放大图片的js组件~~ v0.4 firefox,chrome兼容~~

阅读更多

  最近帮一个朋友做网站,想要一个类似京东网展示手机图片的功能。

  左边是图片(实现图片比显示的大很多),右边是介绍性文字,鼠标放在图片上右边出来一个大的局部的图,
并随着鼠标的移动,展示大图相应的不同区域。

想了下,左边是一个img,mouseenter的时候,create一个div,背景设为img的src。
mousemove的时候,计算鼠标的坐标,换算成大图的坐标。
设置div背景图片的相对位置。让选中局部展示出来。

mouseout的时候隐藏div~~

昨天上午试了试,写了几句jquery代码,搞定效果。
-------------

今天看了看,觉得jquery没其啥作用。去掉之。
封装下,对象化,参数化。~~

 

最后加了点说明, 一共130行代码~~

大家看看~~

 

--------------------------

 

ps:

 

    v0.1:实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。
    v0.2:实现了Firefox的兼容支持,修改了IE下传递偏移0,0时有空隙的对不齐问题。
   

 

 

 

分享到:
评论
7 楼 nighthawk 2009-06-29  
不错!很是细致
6 楼 kimmking 2009-06-25  
kimmking 写道
tianyazjq110 写道
firefox3下不兼容。。

firefox 3.0.8 没有问题

新上传了v0.4版本

/**
   
    qsoft.PopBigImage
   
    version:0.40
    author: kimmking@163.com
    date:   2009年3月25日3:54:50
   
    功能描述:
    一般页面的的图片为了布局考虑,显示大小都小于实际大小。
    鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的层。
    并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
   
    v0.1:实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。
    v0.2:实现了Firefox的兼容支持,修改了IE下传递偏移0,0时有空隙的对不齐问题。
    v0.3:实现了鼠标第一次进入图片时动态创建显示层。提供了一个静态创建方法。
    v0.35:加入了对google chrome浏览器的支持。
           修改了滚动页面后,展示层位置不对。
    v04:修改了ie6下图片晃动的bug。
        修改了在展示层大小有时超出浏览器窗口右边和下边边界的bug。
        ie6/ie7/ff3/chrome下通过。
          
    对于ie7,存在浏览器缓存图片后,获取图片大小为旧值的bug。
   
   
    参数描述:
    origImageId: 要绑定的img对象的id
    dx:展示大图相对于绑定的img对象右方的x轴偏移量
    dy:展示大图相对于绑定的img对象上方的y轴偏移量
    mx:展示层的宽
        mx在0到1之间时,取大图的宽*mx的值与小图的宽中的较大者
        mx在1到10之间时,取小图的宽*mx的值与大图的宽中的较小者
        mx大于10时,确保mx在大小图的宽之间,超出的话,取边界值
    my:展示层的高
        参照mx的值
    bflag:create方法中渲染完后是否将展示层显示出来,
            在onmouseover事件中使用true参数
            在页面加载时初始化的话使用false参数
   
   
   
    用法:
    1、页面加载后统一预先加载,在页面上添加JavaScript脚本
    window.onload = function(){
        new qsoft.PopBigImage("orig",20,0,2,2).render(); 
        //或是 qsoft.PopBigImage.create("orig",20,0,2,2,false).render();   
    }
   
    或是
    2、鼠标第一次进入图片时才加载本图片的显示层,在img标签中添加
    onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);"
   
    **/
5 楼 kimmking 2009-06-25  
tianyazjq110 写道
firefox3下不兼容。。

firefox 3.0.8 没有问题
4 楼 tianyazjq110 2009-06-25  
firefox3下不兼容。。
3 楼 破碎虚空 2009-03-25  
下载学习,先感谢楼主的分享
2 楼 kimmking 2009-03-25  
<pre name="code" class="js">/**
   
    qsoft.PopBigImage
   
    version:0.2
    author: kimmking@163.com
    date:   2009年3月25日3:54:50
   
    功能描述:
    一般页面的的图片为了布局考虑,显示大小都小于实际大小。
    鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的层。
    并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
   
    v0.1:实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。
    v0.2:实现了Firefox的兼容支持,修改了IE下传递偏移0,0时有空隙的对不齐问题。
   
   
    参数描述:
    origImageId: 要绑定的img对象的id
    dx:展示大图相对于绑定的img对象右方的x轴偏移量
    dy:展示大图相对于绑定的img对象上方的y轴偏移量
   
   
    用法:
    window.onload = function(){
        var pbi = new qsoft.PopBigImage("orig",20,0); 
        pbi.render();       
    }
   
    **/
  
  
  
    var qsoft = {
        version : 0.2,
        isIE : document.all?true:false
    }
   
    qsoft.PopBigImage = function (origImageId,dx,dy)
    {
        this.oim = document.getElementById(origImageId);
       
        this.oim.style.cursor = "crosshair";
       
        this.ow = this.oim.width;
        this.oh = this.oim.height;
       
        this.detaX = (typeof(dx) == "undefined")?30 : dx;
        this.detaY = (typeof(dy) == "undefined")?0 : dy;
       
        this.getAbsSize = function (obj)
        {
            return obj.getBoundingClientRect();
        };
       
        var rect = this.getAbsSize(this.oim);
        this.ol = rect.left + this.detaX + this.ow - (qsoft.isIE ?2:0);
        this.ot = rect.top + this.detaY - (qsoft.isIE ?2:0);
       
        this.src = this.oim.src;
       
        this.getImageSize = function (img)
        {
            var im = new Image();
            im.src = img.src;
           
            var size = {};
            size.width = im.width;
            size.height = im.height;
           
            im = null;
            delete im;
           
            return size;
        };
       
        var rsize = this.getImageSize(this.oim);
        this.w = rsize.width;
        this.h = rsize.height;
       
        var qObj = this;
       
        this.createMask = function ()
        {
            if(typeof(this.mask) == "undefined")
            {
                this.mask = document.createElement("div");
               
                this.mask.style.position  = "absolute";
                this.mask.style.width = this.ow + "px";
                this.mask.style.height = this.oh + "px";
                this.mask.style.left = this.ol + "px";
                this.mask.style.top = this.ot + "px";   
                this.mask.style.backgroundImage  = "url("+this.src+")";
                this.mask.style.backgroundRepeat = "no-repeat";    
                this.mask.style.display ="none";   
               
                document.body.appendChild(this.mask);     
            }
        };
       
        this.regEvent = function ()
        {
            this.oim.onmousemove = function ()
            {
           
                var e = arguments[0] || window.event;
               
                var sz = qObj.getAbsSize(e.target|| e.srcElement);
               
                var ox = qsoft.isIE ? e.offsetX: (e.pageX - sz.left);
                var oy = qsoft.isIE ? e.offsetY: (e.pageY - sz.top);
               
                var x = Math.ceil(ox * qObj.w/qObj.ow) - qObj.ow/2;
                var y = Math.ceil(oy * qObj.h/qObj.oh) - qObj.oh/2;
          
               if(x&lt;0) x = 0;
               if(y&lt;0) y = 0;
              
               var maxx = Math.ceil((qObj.w-qObj.ow));
               var maxy = Math.ceil((qObj.h-qObj.oh));
              
               if(x&gt;maxx) x = maxx;
               if(y&gt;maxy) y = maxy;
              
               qObj.mask.style.backgroundPosition = -x  + "px " + -y + "px";

            };
           
            this.oim.onmouseout = function ()
            {
                qObj.mask.style.display = "none";
            };
           
            this.oim.onmouseover = function ()
            {
                qObj.mask.style.display = "block";
            };
           
        };
       
        this.render = function ()
        {
            this.createMask();
            this.regEvent();
        };
       
    };</pre>
<p> </p>
1 楼 kimmking 2009-03-24  
<p> </p>
<pre name="code" class="js"> /**
   
    qsoft.PopBigImage
   
    author: kimmking@163.com
    date:   2009年3月24日16:03:13
   
    功能描述:
    一般页面的的图片为了布局考虑,显示大小都小于实际大小。
    鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的层。
    并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
   
   
    参数描述:
    origImageId: 要绑定的img对象的id
    dx:展示大图相对于绑定的img对象右方的x轴偏移量
    dy:展示大图相对于绑定的img对象上方的y轴偏移量
   
   
    用法:
    window.onload = function(){
        var pbi = new qsoft.PopBigImage("orig",10,-2); 
        pbi.render();       
    }
   
    **/
   
   
    if(typeof(qsoft) == "undefined")
        qsoft = {};
       
    qsoft.PopBigImage = function (origImageId,dx,dy)
    {
        this.oim = document.getElementById(origImageId);
       
        this.oim.style.cursor = "crosshair";
       
        this.ow = this.oim.width;
        this.oh = this.oim.height;
       
        this.detaX = dx?dx : 30;
        this.detaY = dy?dy : 0;
       
        this.getAbsSize = function (obj)
        {
            return obj.getBoundingClientRect();
        };
       
        var rect = this.getAbsSize(this.oim);
        this.ol = rect.left + this.detaX + this.ow;
        this.ot = rect.top + this.detaY;
       
        this.src = this.oim.src;
       
        this.getImageSize = function (img)
        {
            var im = new Image();
            im.src = img.src;
           
            var size = {};
            size.width = im.width;
            size.height = im.height;
           
            im = null;
            delete im;
           
            return size;
        };
       
        var rsize = this.getImageSize(this.oim);
        this.w = rsize.width;
        this.h = rsize.height;
       
        var qObj = this;
       
        this.createMask = function ()
        {
            if(typeof(this.mask) == "undefined")
            {
                this.mask = document.createElement("div");
                this.mask.id = this.oim.id + "_mask";
               
                this.mask.style.position  = "absolute";
                this.mask.style.width = this.ow;
                this.mask.style.height = this.oh;
                this.mask.style.left = this.ol;
                this.mask.style.top = this.ot;
                this.mask.style.backgroundImage  = "url("+this.src+")";
                this.mask.style.backgroundRepeat = "no-repeat";    
                this.mask.style.display ="none";   
               
                document.body.appendChild(this.mask);     
               
                //this.mask.style = "position: absolute; ";//left: "+this.ol+"; top: "+this.ot+";width: " + this.ow + "; height: " + this.oh + ";
                ///*display: none;*/ background: url(" + this.src + ") left top no-repeat;";
            }
        };
       
        this.regEvent = function ()
        {
            this.oim.onmousemove = function ()
            {
                var x = Math.ceil(event.offsetX * qObj.w/qObj.ow) - qObj.ow/2;
                var y = Math.ceil(event.offsetY * qObj.h/qObj.oh) - qObj.oh/2;
          
               if(x&lt;0) x = 0;
               if(y&lt;0) y = 0;
              
               var maxx = Math.ceil((qObj.w-qObj.ow));
               var maxy = Math.ceil((qObj.h-qObj.oh));
              
               if(x&gt;maxx) x = maxx;
               if(y&gt;maxy) y = maxy;
              
               qObj.mask.style.backgroundPositionX = -x;
               qObj.mask.style.backgroundPositionY = -y;
              
            };
           
            this.oim.onmouseout = function (e)
            {
                qObj.mask.style.display = "none";
            };
           
            this.oim.onmouseenter = function (e)
            {
                qObj.mask.style.display = "block";
            };
           
        };
       
        this.render = function ()
        {
            this.createMask();
            this.regEvent();
        };
       
    };
   
    qsoft.version = 0.1;</pre>
<p> </p>
<p> </p>
<pre name="code" class="js">&lt;script type="text/javascript" src="qsoft.PopBigImage.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
 

    window.onload = function (){
        var pbi = new qsoft.PopBigImage("orig",24,-2); 
        pbi.render(); 
       
        var pbi1 = new qsoft.PopBigImage("win7",24,-2); 
        pbi1.render(); 
               
    }
   
    &lt;/script&gt;</pre>
<p> </p>
<p> </p>
<p> </p>
<pre name="code" class="html">&lt;img width="160"  height="120" id="orig" src="dota.jpg" alt="" /&gt;

&lt;img width="160"  height="120" id="win7" src="win7.jpg" alt="" /&gt;
        </pre>
<p> </p>

相关推荐

    LvglFontTool_V0.4

    LvglFontTool_V0.4 V0.4 1、增加FreeType TTF的支持,生成抗锯齿字体更加圆润、光滑。 2、修复后面AWESOME图标不能添加问题。 3、优化了下查找算法。 4、增加了直接存文件的选项,解决文字多时转换死机或慢的问题。...

    navifirm_V0.4.exe

    navifirm_V0.4.exe navifirm_V0.4.exe navifirm_V0.4.exe

    程序压制工具 V0.4

    程序压制工具V0.4的"修正版"可能意味着它已经经过了多次迭代和优化,修复了早期版本的一些问题,提高了稳定性和兼容性。这使得用户在使用过程中能获得更顺畅的体验,减少因为工具本身引发的错误。 压缩包内的"绿盟....

    3dmax强大的相机匹配插件CameraMatch v0.4

    教程用图.jpg提供了详细的步骤演示,通过图片我们可以看到,CameraMatch v0.4如何一步步将2D图像转化为3D场景的过程。111_cameraMatch_cn_v0.4.mse是插件的安装文件,用户可以直接在3dmax中导入并安装。关于.txt文件...

    navifirm_v0.4汉化版诺基亚固件下载工具.zip

    navifirm_v0.4蜃楼汉化版是电脑端的诺基亚NOKIA手机固件下载工具,通过使用它你可以很方便的下载各机型各版本的固件。选择好产品型号和发布版本及CODE,下载即可,可以直接下载到电脑中,也可以通过下载工具保存到...

    IC Card V0.4.exe

    IC Card V0.4.exe

    lvgl v9.1版本使用lvglFontTool V0.4生成的外部bin字库

    lvglFontTool V0.4生成的外部bin字库适配lvgl v9.1版本

    谷歌语音 Google Voice v0.4.6.1

    谷歌语音 Google Voice v0.4.6.1 更新时间:2014-09-13 版本:0.4.6.1 软件语言:非中文 软件类别:网络语音 软件大小:6.82 MB 适用固件:1.6及更 高固件内置广告:没有广告 适用平台:Android Google Voice是一...

    js版 3D坦克大战 V0.4

    【标题】"js版 3D坦克大战 V0.4" 涉及的主要知识点是JavaScript编程、3D图形渲染以及游戏开发。这个项目可能是用JavaScript实现的一个基于Web的3D坦克战斗游戏,版本为V0.4,可能包含了一些改进和修复。 【描述】...

    16位密码生成器v0.4绿色免费

    v0.4可能表示这是该软件的第四个版本,意味着开发者可能已经对其进行了多次改进和优化。 描述部分虽然没有提供具体信息,但我们可以推断这可能是一个便携式应用,因为提到了“绿色免费”。在计算机术语中,“绿色”...

    Aryan RAT v0.4 source src.rar

    Aryan RAT v0.4源码分析 Aryan RAT(远程访问木马)是一种恶意软件,主要用于非法控制和监视受害者的计算机系统。该软件的主要功能是允许攻击者远程执行命令、窃取敏感信息、监控受害者活动,甚至进行键盘记录。在...

    phpaaCMS v0.4.zip

    在深入探讨phpaaCMS v0.4之前,我们先来了解一下什么是内容管理系统(CMS)。 内容管理系统是一种用于创建、管理和发布数字内容的软件应用。它允许非技术人员通过用户友好的界面添加、编辑和删除网站内容,而无需...

    ORB-SLAM3 v0.4-beta

    ORB-SLAM3 v0.4-beta 是一个高级的视觉惯性里程计(Visual-Inertial Odometry,简称VIO)系统,专为实时、准确地估计机器人或无人机的运动而设计。它结合了视觉传感器(如摄像头)和惯性测量单元(IMU)的数据,以...

    狂牛视频加密 v0.4.8.7读key工具我试过能行

    最后,考虑到实际应用,"狂牛视频加密 v0.4.8.7"的读key工具很可能与多种平台和设备兼容,包括但不限于桌面、移动设备和智能电视等。这意味着无论用户在哪里,只要拥有正确的授权,都能通过读取密钥来观看加密的视频...

    图片压缩 v0.4.1.7z

    "图片压缩 v0.4.1.7z"是一款专注于图片压缩的绿色免安装软件,无需繁琐的安装步骤,用户可以直接运行以实现对图片的高效压缩。它通过智能算法优化图片数据,降低图片的存储空间,同时尽可能保持图片质量,满足用户对...

    设备树规范devicetree-specification-v0.4

    描述了设备树的规范文件

    MYSUC精致留言板 v0.4

    MYSUC精致留言板(asp+access)UTF-8编码 (如需GB2312编码,请转自官方下载) 使用模块技术,前后端代码完全分离,可以很容易的修改留言板的结构与样式。 0... 软件类别:留言日记 运行环境:ASP环境/ 授权方式:...

    lfhacks日记 v0.4.zip

    lfhacks日记 0.4 更新日志:2014-08-08 自动设置时区为PRC( 8) 提供两种语言界面: 中文:index-zh.php 英文:index-en.php 改名为index.php即可使用。 英文版与之前的版本兼容,如果转中文版,需要新创建...

    文件备份专家(BackupMaster) v0.4

    BM是一个文件备份工具,它可以保存你需要备份的多个文件或者文件夹的路径,备份方式,命名策略等信息,在执行备份任务的时候把文件或文件夹(压缩)拷贝到指定的目录。默认情况下,BM在执行备份的时候会检测文件日期...

    ntpwedit v0.4(SAM文件查看器)汉化版.rar

    软件介绍: 能够打开C:\WINDOWS\SYSTEM32\CONFIG\SAM文件,查看系统用户名及密码,支持windows2k/xp/vista/win7...压缩包内附32及64位版本。不要在WINDOWS系统下打开SAM,会提示打开失败,请进入PE系统就可以查看了。

Global site tag (gtag.js) - Google Analytics