jQuery图片标注效果，点击事件触发一次添加一个标注并把前面的标注清除了

这段代码没什么用，没有完成你想要的任何效果。

核心封装在easypinShow这个方法，传入的是一个对象，这个对象只是些参数。

“再添加一个图片标注，并把前面的标注清除掉”其实很简单做到，但是修改的是easypinShow这个方法的代码，除非你把easypinShow这个方法的代码放出来。

你这个应该是在网上找别人的插件直接套进去使用，你这些代码其实只是Dome。

(function($){//定义作用域

$.fn.imagezoom=function(options){/*自定义插件imageszoom，options代表形参（属性自定义）*/

var settings={

xzoom: 350, /*放大图的宽度(默认是 350)*/

yzoom: 350, /*放大图的高度(默认是 350)*/

offset: 10, /*离原图的距离(默认是 10)*/

position: "right", /*放大图的定位(默认是 "right")*/

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=="right"){

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'/*x轴比例 */

var scalex='y'/*y轴比例 */

/*随鼠标移动显示大图*/

if(isNaN(scalex)|isNaN(scaley)){/*x、y轴比例不是数字时*/

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+$(".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.zoomMask*/

$("div.zoomDiv").remove()/*移除所有的div.zoomDiv*/

}

count=0

if(settings.preload){

/*在boby元素的结尾（仍然在内部）插入指定内容*/

$('body').append("<div style='display:none' class='jqPreload"+count+"'></div>")

$(this).each(function(){/*规定为每个匹配元素规定运行的函数*/

var imagetopreload=$(this).attr("rel")/*图片预加载*/

var content=jQuery('.jqPreload'+count+'').html()

jQuery('.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">')

})

}

}

})(jQuery)

function MouseEvent(e){/*记录鼠标x，y坐标*/

this.x=e.pageX/*鼠标指针位置*/

this.y=e.pageY

}

有的人在工作的过程中，需要批量存储一些图片，对于这些图片的储存来说，如果可以加上注释的话，那么更有利于搜索和保存，如果想要在图片上架注释可以使用敬业签， *** 作流程如下：

1、打开敬业签软件，点击新建，输入文字备注内容。

2、插入图片保存，每条便签可插入10张图片。

3、保存完成。

---