Shell脚本 NTFS权限 image collections datatable ios4 tags signalr jquery触发change事件 ajax的get请求 hadoop源码 idea大小写转换快捷键 git登陆命令 java上传图片 cmd清空命令 mysql时间戳转换日期 kubernetes集群 python环境搭建 python排序 python创建文件 java的数据类型 java数组添加元素 java语言代码大全 java语言介绍 java判断语句 linux简介 swing布局 js转int gilisoft mac画图软件 免费书籍 战斗的召唤 迅雷会员共享账号 挑战程序设计竞赛 抠图软件免费版 sql2008r2 wps苹果mac版 wps苹果电脑版 python去重 cad代理信息
当前位置: 首页 > 学习教程  > 编程学习

javascript放大镜效果

2021/1/9 1:59:43 文章标签: ps鼠标放大缩小

先看效果: javascript放大镜效果在博客园里面已经有不少同行做过了,我这篇随笔其实也是大量参考了他们的代码,特别是Hellen.Li 博客《JavaScript图片放大镜效果》的代码,写得非常好,我主要也是以它的代码为蓝本加以改进…

先看效果:

 

javascript放大镜效果在博客园里面已经有不少同行做过了,我这篇随笔其实也是大量参考了他们的代码,特别是Hellen.Li 博客《JavaScript图片放大镜效果》的代码,写得非常好,我主要也是以它的代码为蓝本加以改进,对其在chrome的bug做了改正。同时取消了对怪异模式的兼容(个人觉得没必要),对mouseout的问题也用了另外一套解决方法,不能说优化,只是这种做法个人比较容易理解。

1,关于mouseout问题:

当鼠标从div中移开的时候会触发onmouseout事件,但是当我们移到div中的元素时,即子元素,也会触发onmousout事件。也就是说,移到对象的子对象上,也算onmouseout了。这往往会让我们预期的效果达不到。这次在放大镜效果的代码中就遇到这个问题。我在网上查到一个比较好的解决方法:

?
<! 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 >橡树小屋</ title ></ head >< body >
< script type="text/javascript">
function test(obj, e) {
     //火狐,opera专用,e.currentTarget是火狐,opera专用的属性
alert(e.currentTarget);
if (e.currentTarget) {
     //relatedTarget对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
     //e.relatedTarget != obj,当移入子元素的时候,会出现相等
     if (e.relatedTarget != obj) {
         if (obj != e.relatedTarget.parentNode) {
             alert(1);
         }
     }
  //ie专用
} else {
    if (e.toElement != obj) {
         if (obj != e.toElement.parentNode) {
          alert(1);
         }}}
}
</ script >
< div onmouseout="test(this, event)" style="width:100px;height:100px;border:1px #666 solid">
< span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">橡树小屋</ span >
</ div ></ body ></ html >

此代码在放大镜效果中有应用到。

2,关于其中的可用性优化

当鼠标移出图像的时候,图像马上消失,这种消失的突然令人感觉不够舒服,特别是当图像像上面那么小的时候,可用性不好,本来我加了白色的背景border作为缓冲,当鼠标移出图像,如果还在图片周围5像素之内,大图像仍然会保留不消失,这样一个简单的过渡,体验更好些。在实际编写代码的时候,发现IE浏览器对border的mouseover事件效率不是很高,如果鼠标快速移出图片,大图有时不消失,当然还有其他因素,例如事件浮升等等影响,后来调试了很久也没有很好的解决方案,关于这个问题,有机会再另外总结一遍吧。

3,如何调用

HTML代码的格式应该如下,其实跟Hellen.Li 原来的架构基本一样,只是内部代码调整过而已:

?
//外面包裹一个相对定位或绝对定位的div,不能有padding,
< div style="position:relative;border:5px solid #FFF; float:left; margin-left:400px;">
< img src="1.jpg" class="zoom" big="1.jpg" />
</ div >

添加class=“zoom”,big="1.jpg"是大图的地址。

用 zoom({width:300,height:300});来调用,可以添加下面几个参数:

?
1
2
3
4
5
         width:200, //大图的宽度
height:200, //大图的高度
offset:20,  //大图的偏移量
float: 'right' , //大图在左边还是右边
minWidth:100  //当窗口缩小,大图最小的宽度,如果小于minWidth,则移到左边

添加css:

?
1
2
3
#zoomdiv{ position : absolute ; background : #ffffff ; border : 1px solid #CCCCCC ; display : none ; text-align : center ; overflow : hidden ;}
#zoomup{ position : absolute ; background : #c0c0c0 ; display : none ;filter:alpha(opacity= 50 );opacity:. 5 ; cursor : move ;}
.zoom{ position : relative ; width : 100px ; vertical-align : bottom ; /*处理IE bug*/ }

然后导入lens.js文件,就可以观察到javascript放大镜的效果了。下面是lens.js的代码内容:

 /**************************************************
* Drag.js beta1
* 作者:橡树小屋 08.05.2010
* http://www.cnblogs.com/babyzone2004/
* 用法:zoom({width:300,height:300}); width,height是放大显示的区域
*************************************************
*/


//定义所有的变量,方法
var zoom = function(o){
   
var d = document,
    db
=document.body,
    timgs
=d.getElementsByTagName('img'),
    opt
= {
        width
:200,
        height
:200,
        offset
:20,
       
float:'right',
        minWidth
:100
        }
,
       div
= d.createElement('div'),
       divup
= d.createElement('div'),
   
//获取元素的定位,x,y
       getXY = function(el){
   
var r={t:0,l:0},
        ua
= navigator.userAgent.toLowerCase(),
        add
= function(t,l){r.l+=l,r.t+=t},
        p
= el;
       
if(el&&el!=db){
       
//el.getBoundingClientRect,获得元素的左,上,右和下分别相对浏览器视窗的位置
        if(el.getBoundingClientRect){
       
var b = el.getBoundingClientRect();
        add(b
.top + Math.max(d.body.scrollTop,d.documentElement.scrollTop),
            b
.left+Math.max(d.body.scrollLeft,d.documentElement.scrollLeft));
        add(
-d.documentElement.clientTop,-d.documentElement.clientLeft);
             }
else{
               
while(p){
                    add(p
.offsetTop,p.offsetLeft);
                    p
= p.offsetParent;
                }
                p
= el.parentNode;
               
while (p && p != db) {
                    add(
-p.scrollTop,-p.scrollLeft);
                    p
= p.parentNode;
                }
            }
        }
          
return r;
       }
,
   
//重新设置div的宽高
       extend = function(t,s){
         
for(var p in s){
        t[p]
= s[p];
        };
       };
  
       div
.id='zoomdiv',divup.id = 'zoomup';
       div
.innerHTML = '<img id="bigimg" src="" />';
       db
.appendChild(div);
       extend(opt
,o);
      
function leave(obj,e){
       
var e=e||event;
       
/*alert(obj);
        alert(e.currentTarget);
*/
       
//火狐,opera专用,e.currentTarget是火狐,opera专用的属性
        if (e.currentTarget) {
           
//relatedTarget对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
            //e.relatedTarget != obj,当移入子元素的时候,会出现相等

            if (e.relatedTarget != obj) {
               
if (obj != e.relatedTarget.parentNode) {
                    div
.style.display = divup.style.display = 'none';
                    db
.onmousemove = null;
                }
            }
        }
else {//ie专用
            if (e.toElement != obj) {
               
if (obj != e.toElement.parentNode) {
                    div
.style.display = divup.style.display = 'none';
                    db
.onmousemove = null;
                }
            }
        }
           };
       
      
for(var i=0,ci;ci=timgs[i++];){
       
if(ci.className=='zoom'){
            ci
.onmouseover = function(e){
                 this
.parentNode.appendChild(divup);
                
var bimg=d.getElementById('bigimg'),bwidth,bheight,sx,sy,
                   width
= this.offsetWidth,
                height
= this.offsetHeight,
                top
=getXY(this).t,
                left
= getXY(this).l,
                tWidth
,tLeft,sWidth;
               
//当鼠标移过的时候,开始载入大图
                bimg.src = this.getAttribute('big');
                   
               
if(!bimg.complete){
                    bimg
.onload=showBimg;
                }
else{
                    showBimg();
                    }
                 
function showBimg(){
                    div
.style.display = 'block';
                    bwidth
= bimg.width,
                    bheight
= bimg.height,
                       sx
= bwidth/width,sy = bheight/height;
                    tLeft
=opt.float=='right'?opt.offset+width+left:left-opt.offset-opt.width,           
                    sWidth
= window.innerWidth||(d.documentElement.clientWidth);
                   
//如果浏览器宽度不够,则自动适应显示div的宽度
                    if(tLeft+opt.width+5>sWidth){
                        tWidth
= sWidth - 5 - tLeft;
                       
//此句式比较特殊
                        tWidth<opt.minWidth&&(tLeft = left-opt.offset-opt.width,tWidth=0);
                        };
                   
//设置div,divup的宽高和位置
                    extend(div.style,{
                        left
:tLeft +'px',
                        top
:top+'px',
                        width
:(tWidth||opt.width)+'px',
                           height
:opt.height+'px'
                           });
                       extend(divup
.style,{
                        width
:(tWidth||opt.width)/sx+'px',
                        height
:opt.height/sy+'px',
                           display
:'block'
                          });
                       db
.onmousemove = function(e){
                       
var e = e || event,
                       
//显示非IE的鼠标位置,然后是IE的
                        x=e.pageX||(e.clientX+(d.documentElement.scrollLeft||db.scrollLeft)),
                        y
=e.pageY||(e.clientY+(d.documentElement.scrollTop||db.scrollTop)),
                       
//X,Y相对于原始图片的位置
                        scrolly = y - divup.offsetHeight/2 - top,
                        scrollx
= x - divup.offsetWidth/2 - left;
                       
//如果鼠标接近边界的时候,相对位置将不再随鼠标发生变化

                        scrolly
= y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>height+top ? height - divup.offsetHeight  : scrolly;
                        scrollx
= x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>width+left ? width - divup.offsetWidth  : scrollx;
                        div
.scrollTop = scrolly*sy;
                        div
.scrollLeft =  scrollx*sx;
                        extend(divup
.style,{top:scrolly+'px',left:scrollx+'px'});
                       }
                  };
             };
        ci
.parentNode.onmouseout =function(event){leave(this,event)};
        }
      };   
}

附件源码:javascript放大镜效果 修正版

PS:感谢cdboy的提醒。

参考资料:

lulu Studio:javascript onmouseout问题解决方案

Hellen.Li :JavaScript图片放大镜效果

 

《javascript放大镜效果》

BY 

橡树小屋

 from  http://www.cnblogs.com/babyzone2004/
本文地址: http://www.cnblogs.com/babyzone2004/archive/2010/08/05/1793451.html
   
转自: http://www.cnblogs.com/babyzone2004/archive/2010/08/05/1793451.html

本文链接: http://www.dtmao.cc/news_show_1100191.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?