<script src="js/jquery/1.11.1/jquery.min.js"></script>

<div class="box"> <input type="text" name="title"> <input type="text" name="link" value="http://">  <input type="button" value="添加鏈接" id="add"> <input type="button" value="編輯" id="show"></div><div class="img_box"> <img src="images/55cc64813c330.jpg"></div>

*{padding: 0; margin: 0;}.box{margin: 10px;}.img_box{position: relative;}.img_box .maodian{position: absolute; padding: 5px 10px; border-right: 5px; background: #000;    filter:alpha(opacity=40);    -moz-opacity:0.4;    opacity:0.4;   top:10px;   left:10px;   color:#FFF;   font-size: 12px;   font-family: "宋體";   cursor: pointer;}.maodian a{color: #FFF; text-decoration: none;}

$(function(){   var obj = null ;//定義標簽對象的全局變量，目的用于編輯   $("#add").click(function(){//綁定添加按鈕單擊事件    var title = $("input[name=title]").val();//取得標題內容    var link = $("input[name=link]").val();//取得超鏈接    var html = "<p class='maodian'><a href='"+link+"'>"+title+"</a></p>";組裝P標簽    $(".img_box").append(html); //添加到img_box div中，即圖片的后面   });    $(".img_box").delegate(".maodian","mousedown",function(e){//綁定標簽鼠標按下事件    obj = $(this);//把當前標簽對象賦值給變量    if(obj.setCapture){ //用于兼容非準瀏覽器     obj.setCapture();    }    $("input[name=title]").val(obj.find("a").text());//把點中標簽的內容加到標題文本框中    $("input[name=link]").val(obj.find("a").attr("href"));/把點中標簽的鏈接加到鏈接本框中     var _x = e.pageX - obj.offset().left;//取得鼠標到標簽左邊left的距離     var _y = e.pageY - obj.offset().top; //取得鼠標到標簽頂部top的距離     var oWidth = $(this).outerWidth(); //取得標簽的寬，包括padding     var oHeight = $(this).outerHeight();//取得標簽的高，包括padding     var x=0,y=0; 定義移動的全局變量      $(".img_box").bind("mousemove",function(e){      var img_position = $(".img_box").offset(); //取得圖片的位置      x = e.pageX -_x - img_position.left; //計算出移動的x值      y = e.pageY -_y - img_position.top; //計算出移動的y值      if(x<0){ //如果移動小于0，證明移到了圖片外，應設為0       x = 0;      }else if(x>($(".img_box img").width()-oWidth)){      //如果移動大于圖片的寬度減去標簽的寬度，證明移到了圖片外，應該設為可用的最大值       x = $(".img_box img").width()-oWidth;      }       if(y<0){ //同上       y = 0;      }else if(y>($(".img_box img").height()-oHeight)){       y = $(".img_box img").height()-oHeight;      }      obj.css({"left":x,"top":y});     });      $(".img_box").bind("mouseup",function(){ //綁定鼠標左鍵彈起事件      $('.img_box').unbind("mousemove"); //移動mousemove事件      $(this).unbind("mouseup"); //移動mouseup事件      if(obj.releaseCapture){ //兼容非標準瀏覽器      obj.releaseCapture();     }           });     return false; //用于選中文字時取消瀏覽器的默認事件   });    $(".img_box").delegate(".maodian","dblclick",function(){//綁定雙擊事件    $(this).remove(); //刪除當前標簽   })    $("#show").click(function(){//綁定編輯按鈕     //更新內容到標簽    obj.find("a").text($("input[name=title]").val()).attr("href",link);   })     $(".img_box").delegate("a","click",function(){ //取消a標簽的單擊默認事件    return false;   })   })