您的位置：首页 > Web前端 > JQuery

jquery利用拖拽方式在图片上添加热链接

2015-11-24 16:37 941 查看

本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程，分享给大家供大家参考。具体如下：
运行效果截图如下：

项目的需求，要在一张图片上加不同的链接，比如说，图片是一个套房，里面有沙发，茶几，酒柜，电视柜等，然后在这些物件上加一个超链接，点击后打开相关产品的介绍。

用jquery写了一个在图片添加锚点的功能，实现的原理：一个文本框写入标题，一个文本框写链接，一个添加按钮，一个编辑按钮，当写好内容后点击添中添加，便会在图片的上方出现一个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;
})
})

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 拖拽锚点

相关文章推荐

新的分享

章节导航