欢迎来到51自学网!

51自学网

当前位置: 主页 > CMS教程 >

jQuery chili图片远处放大插件

时间:2018-03-07 18:20来源:网络整理 作者:51自学网 点击:
为了让本地图片、远程图片、过小的图片都适应此插件,有很多细节问题要处理。 首先定义结构: div div!--覆盖层,鼠标的感应区域,位于小图上最方--/div div!--小图上方的悬停提示方框

为了让本地图片、远程图片、过小的图片都适应此插件,有很多细节问题要处理。

首先定义结构: <div> <div><!--覆盖层,鼠标的感应区域,位于小图上最方--></div> <div><!--小图上方的悬停提示方框--></div> <div><!--装载大图的容器,绝对定位<img src="bigOne.jpg" /><!--前景大图,绝对定位--></div> </div> <!--样式--> <style type="text/css"> .imgMagnifierWrap *{position:absolute;background:#fff;} .imgMagnifierWrap .tipboxHover{width:80px; height:60px; filter:alpha(opacity=30);opacity:.3;display:none;} .imgMagnifierWrap .imgOriginal{display:none;z-index:9999;overflow:hidden; width:400px; height:400px; background-color:#cdf; background-repeat:no-repeat; text-align:center;border:1px solid #555; } .imgMagnifierWrap .overlay{cursor:crosshair;filter:alpha(opacity=0);opacity:0;} <style> 然后考虑图片预加载: $.imgPreloader=function(url,eventLists){ var img=new Image(); var $img=$(img); img.src=url; $.each(eventLists,function(type,fn){ $img.bind(type,fn); }); $img.trigger(img.complete?'load':'begin'); return $img; }; 再计算感应区域: 小图所处感应区域四边各减去指示方框各四边的1/2大小的矩形,在此之外的区域则显示到大图边界: var borderLeft =thumbInfo.left+tipboxInfo.width/2; var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width); 用大图用做背景图片引发的问题: 用隐藏的前景图片预加载,load事件判断时机,ie,chrome正常,ff请求了两次图片,图片未缓存; 换一种方式,不预载大图。改成直接在大图位置用覆盖层做“loading”后,chrome下表现为渐进加载图片,非chrome是直接显示,略有遗憾。 最终结果,把大图用做前景图片: 优势在于,大图的load和error事件都可以正常工作: $.imgPreloader($anchor.attr('href'),{ load:function(){ isImageReady=true; $o.empty().append(this); setTimeout(autoFitPicture,0); }, begin:function(){ $o.text('loading...'); }, error:function(){ isImageReady=true; $o.text('invalid picture!'); } });

大图预载的load事件和小图mousemove事件不同步的解决办法:实时存储鼠标坐标,把提示方框定位和大图定位的方法分离。

//鼠标位置存储 var mouseInfo={x:0,y:0}; //指示框定位 var setTipboxPosition=function(e){ mouseInfo.x=e.pageX; mouseInfo.y=e.pageY; $tipbox.css({ top:mouseInfo.y<thumbInfo.width/2+thumbInfo.top ?Math.max(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top) :Math.min(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top+thumbInfo.height-tipboxInfo.height), left:mouseInfo.x<thumbInfo.width/2+thumbInfo.left ?Math.max(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left) :Math.min(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left+thumbInfo.width-tipboxInfo.width) }); setImgPosition(); };

随便一提,如果有一种浏览器,也许会很幸运。
演示代码
打包下载

您可能感兴趣的文章:

  • 图片放大
  • (责任编辑:admin)

    织梦二维码生成器
    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    ------分隔线----------------------------
    栏目列表
    推荐内容