欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-06 17:42:42
...
本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考。具体如下:
运行效果截图如下:

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

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

用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松开就可以了,下面来看具体代码。

首入引入jquery库


构建html。

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

写上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 = "

"+title+"

";组装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($(".img_box img").width()-oWidth)){ //如果移动大于图片的宽度减去标签的宽度,证明移到了图片外,应该设为可用的最大值 x = $(".img_box img").width()-oWidth; } 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; }) })

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