时间：2021-07-01 10:21:17 帮助过：2人阅读
项目的需求，要在一张图片上加不同的链接，比如说，图片是一个套房，里面有沙发，茶几，酒柜，电视柜等，然后在这些物件上加一个超链接，点击后打开相关产品的介绍。
用jquery写了一个在图片添加锚点的功能，实现的原理：一个文本框写入标题，一个文本框写链接，一个添加按钮，一个编辑按钮，当写好内容后点击添中添加，便会在图片的上方出现一个P标签，然后按着鼠标左键拖拽该标签放到相应的地方松开就可以了，下面来看具体代码。
首入引入jquery库
构建html。
写上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
以上就是本文的全部内容，希望对大家的学习有所帮助。