jquery利用拖拽方式在圖片上添加熱鏈接

更新時間：2015年11月24日 16:37:15 投稿：lijiao

這篇文章主要介紹了jquery利用拖拽方式在圖片上添加熱鏈接的方法，其實是用jquery寫了個可以在圖片添加錨點的功能，感興趣的小伙伴們可以參考一下

本文實例講述了jquery利用拖拽方式在圖片上添加熱鏈接的實現(xiàn)過程，分享給大家供大家參考。具體如下：
運行效果截圖如下：

項目的需求，要在一張圖片上加不同的鏈接，比如說，圖片是一個套房，里面有沙發(fā)，茶幾，酒柜，電視柜等，然后在這些物件上加一個超鏈接，點擊后打開相關產(chǎn)品的介紹。

用jquery寫了一個在圖片添加錨點的功能，實現(xiàn)的原理：一個文本框寫入標題，一個文本框寫鏈接，一個添加按鈕，一個編輯按鈕，當寫好內容后點擊添中添加，便會在圖片的上方出現(xiàn)一個P標簽，然后按著鼠標左鍵拖拽該標簽放到相應的地方松開就可以了，下面來看具體代碼。

首入引入jquery庫

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

構建html。

<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>

寫上CSS，注意這里標簽的位置是相對于圖片的位置的，所以圖片的img_box要加上position: relative;

*{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;}

寫上JS

$(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;
   })
 
  })

以上就是本文的全部內容，希望對大家的學習有所幫助。

您可能感興趣的文章: