探索jQuery插件:OKzoom

OKzoom 是一个jQuery插件,实现了类似放大镜的精巧效果.

使用

方式一:将img元素与OKZoom绑定,这样就可实现最简单的放大镜效果.

方式二:将img元素与OKZoom绑定,并为img元素添加一个data-okimage属性,这样,可以为放大镜指定另一张图片.

方式三:因为可以添加data-image属性作为放大镜的背景图片,这就意味着可以在任意元素上应用这个插件,例如你可以为一段文字添加图片注释.


$('img').okzoom({
  width: 200,
  height: 200,
  round: true,
  background: "#fff",
  backgroundRepeat: "repeat",
  shadow: "0 0 5px #000",
  border: "1px solid black"
 });

原理

简单来说,OKZoom实现的核心是使用CSS属性: background-position .例如,你有一张1000*1000尺寸的图片,你通过CSS将其在显示成500*500,调用OKZoom的配置对象中width与height为200,并将鼠标放置在图片中央.这样可以使用img元素的naturalWidth,naturalHeight 属性获取图片原尺寸,进而获得原尺寸与显示尺寸之比.最后通过算法:


/*scaleLeft为放大镜元素background-position的left属性值,scaleTop为top属性值.
*pageX与pageY分别为鼠标指针与文档横纵方向的距离.
*base.offset.left与base.offset.top分别是图片与文档边缘的距离.
*base.widthRation与base.HeightRatio分别是图片的原尺寸与显示尺寸之比.
*shimLeft与shimTop分别为放大镜元素横向与纵向尺寸的一半.
*/
var scaleLeft = -1 * Math.floor((pageX - base.offset.left) * base.widthRatio - shimLeft);
var scaleTop = -1 * Math.floor((pageY - base.offset.top) * base.heightRatio - shimTop);

计算出放大镜元素background-position属性的值.


var scaleleft=-1*250*2-200-100;
var scaleTop=-1*250*2-200-100;

这样,就将以上计算出来的值应用到放大镜元素的background-position上,即能正确显示原图,进而实现效果.对于设置data-okimage属性的元素来说,同理,只是放大镜元素的背景图片变了而已.