每天一个jquery插件-图片的标记1
图片的标记1
看到一个效果，就是你给图片做上标记然后，鼠标到了指定位置就会悬浮出你要的效果的小功能
效果如下
分析得出要有以下几个效果
- 鼠标悬浮展示标记的效果
- 添加新标记的效果
- 拓展就是能够取到所有标记的值和位置
今天就做了个加载和渲染，明天再给完成编辑效果
html与css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片的标记</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/tpdbj.js"></script>
<link href="css/tpdbj.css" rel="stylesheet" type="text/css" />
<style>
#img1{
width: 400px;
}
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.fz{
border: 1px solid red;
position: relative;
}
.fz img{
height: 100%;
width: 100%;
z-index: 0;
}
.bj{
border: 2px solid white;
height: 10px;
width: 10px;
z-index: 1;
position: absolute;
}
</style>
</head>
<body>
<img src="img/景色图片1.jpeg" id="img1" />
</body>
</html>
<script>
var temp = tpdbj("#img1",[
{
left:10,
top:10,
content:"内容1"
},
{
left:40,
top:40,
content:"内容2"
},
{
left:280,
top:80,
content:"内容3"
},
{
left:100,
top:200,
content:"内容4"
}
])
temp.load();
</script>
js部分
var tpdbj = function(id,ops){
var $id = $(id);
var $dom = $("<div class='fz'><div>");
$dom.css({
"width":$id.width(),
"height":$id.height(),
"position":$id.css("position"),
"left":$id.css("left"),
"top":$id.css("top"),
"right":$id.css("right"),
"bottom":$id.css("bottom")
})
$dom.appendTo($id.parent())
$id.appendTo($dom)
var $bjs = [];
ops.forEach(item=>{
var $bj = $("<div class='bj' title='"+item.content+"'></div>")
$bj.css({
"left":item.left+"px",
"top":item.top+"px"
})
$bj.appendTo($dom);
console.log(item)
})
return{
$dom:$dom,
load:function(){
var that = this;
console.log(("写事件"));
}
}
}
大概的思路就是，新建一个div，继承图片的所有样式，然后把图片包含进去，接着给上浮动，后面就可以以这个辅助容器做参考把标记的点全部放置进去了，因为目标的效果大多能看出来一点就是用了类似bootstrap的库将title拓展了，后面的编辑效果就还算容易吧，把定位拿到，然后得到字符，生成一条数据添加回去数组，然后再把数组重新渲染一次就行了，或者说单独渲染也行。