V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
acpp
V2EX  ›  问与答

来v2请教个js兼容性的问题

  •  
  •   acpp · 2012-07-09 01:18:07 +08:00 · 2752 次点击
    这是一个创建于 4556 天前的主题,其中的信息可能已经有所发展或是发生改变。
    感觉应该是js引起的。在ie下和chrome下,会出现一点点差异,具体表现在,ie下所在的高度,比chrome下的要低一些,

    (function($){$.fn.imagezoom=function(options){var settings={xzoom:310,yzoom:300,offset:10,position:"BTR",preload:1};if(options){$.extend(settings,options);}
    var noalt='';var self=this;$(this).bind("mouseenter",function(ev){var imageLeft=$(this).offset().left;var imageTop=$(this).offset().top;var imageWidth=$(this).get(0).offsetWidth;var imageHeight=$(this).get(0).offsetHeight;var boxLeft=$(this).parent().offset().left;var boxTop=$(this).parent().offset().top;var boxWidth=$(this).parent().width();var boxHeight=$(this).parent().height();noalt=$(this).attr("alt");var bigimage=$(this).attr("rel");$(this).attr("alt",'');if($("div.zoomDiv").get().length==0){$(document.body).append("<div class='zoomDiv'><img class='bigimg' src='"+bigimage+"'/></div><div class='zoomMask'> </div>");}
    if(settings.position=="BTR"){if(boxLeft+boxWidth+settings.offset+settings.xzoom>screen.width){leftpos=boxLeft-settings.offset-settings.xzoom;}else{leftpos=boxLeft+boxWidth+settings.offset;}}else{leftpos=imageLeft-settings.xzoom-settings.offset;if(leftpos<0){leftpos=imageLeft+imageWidth+settings.offset;}}
    $("div.zoomDiv").css({top:boxTop,left:leftpos});$("div.zoomDiv").width(settings.xzoom);$("div.zoomDiv").height(settings.yzoom);$("div.zoomDiv").show();$(this).css('cursor','crosshair');$(document.body).mousemove(function(e){mouse=new MouseEvent(e);if(mouse.x<imageLeft||mouse.x>imageLeft+imageWidth||mouse.y<imageTop||mouse.y>imageTop+imageHeight){mouseOutImage();return;}
    var bigwidth=$(".bigimg").get(0).offsetWidth;var bigheight=$(".bigimg").get(0).offsetHeight;var scaley='x';var scalex='y';if(isNaN(scalex)|isNaN(scaley)){var scalex=(bigwidth/imageWidth);var scaley=(bigheight/imageHeight);$("div.zoomMask").width((settings.xzoom)/scalex);$("div.zoomMask").height((settings.yzoom)/scaley);$("div.zoomMask").css('visibility','visible');}
    xpos=mouse.x-$("div.zoomMask").width()/2;ypos=mouse.y-$("div.zoomMask").height()/2;xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft;yposs=mouse.y-$("div.zoomMask").height()/2-imageTop;xpos=(mouse.x-$("div.zoomMask").width()/2<imageLeft)?imageLeft:(mouse.x+$("div.zoomMask").width()/2>imageWidth+imageLeft)?(imageWidth+imageLeft-$("div.zoomMask").width()):xpos;ypos=(mouse.y-$("div.zoomMask").height()/2<imageTop)?imageTop:(mouse.y+$("div.zoomMask").height()/2>imageHeight+imageTop)?(imageHeight+imageTop-$("div.zoomMask").height()):ypos;$("div.zoomMask").css({top:ypos,left:xpos});$("div.zoomDiv").get(0).scrollLeft=xposs*scalex;$("div.zoomDiv").get(0).scrollTop=yposs*scaley;});});function mouseOutImage(){$(self).attr("alt",noalt);$(document.body).unbind("mousemove");$("div.zoomMask").remove();$("div.zoomDiv").remove();}
    count=0;if(settings.preload){$('body').append("<div style='display:none;' class='jqPreload"+count+"'></div>");$(this).each(function(){var imagetopreload=$(this).attr("rel");var content=jQuery('div.jqPreload'+count+'').html();jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">');});}}})(jQuery);function MouseEvent(e){this.x=e.pageX;this.y=e.pageY;}
    11 条回复    1970-01-01 08:00:00 +08:00
    zythum
        1
    zythum  
       2012-07-09 01:39:34 +08:00   ❤️ 1
    哥哥,您别这样啊。有密集恐惧症的...你给个环境把
    airyland
        2
    airyland  
       2012-07-09 01:48:05 +08:00
    额,无图无demo,目测没人能帮lz..
    acpp
        3
    acpp  
    OP
       2012-07-09 01:48:40 +08:00
    @zythum http://222.73.205.87:84/goods.php?id=33
    acpp
        4
    acpp  
    OP
       2012-07-09 01:49:31 +08:00
    鼠标移动到图片上,右侧出现的效果,在ie下顶端是对齐的, chrome等浏览器就上移了
    Air_Mu
        5
    Air_Mu  
       2012-07-09 02:16:32 +08:00
    <div class="zoomDiv" style="top: 230px; left: 983px; width: 310px; height: 300px; display: block; ">

    top:269正好对齐。
    zythum
        6
    zythum  
       2012-07-09 03:30:36 +08:00
    @Air_Mu 这个是js算出来的的不能定死

    @airyland 恩在HTML结构的那个原图的img标签外面包的a标签设置display:block,就可以解决问题了。

    PS. 睡觉前看手机看似人。看你都给我感谢了,我都不好意思不爬起来看看.
    zythum
        7
    zythum  
       2012-07-09 03:33:19 +08:00   ❤️ 1
    @airyland 对不起 @ 错人了。
    acpp
        8
    acpp  
    OP
       2012-07-09 03:55:43 +08:00
    谢谢楼上的朋友们哈,我先看下
    acpp
        9
    acpp  
    OP
       2012-07-09 13:35:30 +08:00
    非常感谢Air_Mu 和zythum 现在遇到另外个情况,不管在ie下还是chrome下,右侧的内容都出现下滑,比左侧内容低一块 我想问下,现在该怎么处理 @Air_Mu @zythum 还有那个zythum兄弟,看下邮件哈
    NemoAlex
        10
    NemoAlex  
       2012-07-09 13:58:13 +08:00
    没有仔细看代码
    说一下:offsetHeight 在 IE 和其它浏览器里的表现不同,这一点经常会引起问题
    比较好的办法是用框架里的一些兼容方法,jQuery 我不知道,Mootools 可以用 element.getSize() 取到比较确定的值
    acpp
        11
    acpp  
    OP
       2012-07-09 14:22:07 +08:00
    非常感谢楼上的各位,问题已经解决!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2091 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:19 · PVG 09:19 · LAX 17:19 · JFK 20:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.