One jquery plugin per day-custom title
Custom title
Many front-end style beautification frameworks almost have this function, so I also thought about some effects and figured out the effect of the low-profile version.
The effect is as follows
Code part
<!DOCTYPE html>
<html title="html">
<head>
<meta charset="utf-8">
<title>自定义标题</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
#div{
border: 1px solid lightgray;
width: 95%;
margin: 20px auto;
height: 100px;
}
ul{
width: 95%;
margin: 0 auto;
}
ul li:hover{
background-color: lightgray;
}
.alert{
border: 1px solid white;
background-color: black;
color: white;
border-radius: 5px;
height: 30px;
padding: 5px;
display: inline-block;
position: fixed;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body title="body">
<div id="div" title="这是一个容器"></div>
<ul title="ul">
<li title="标签1">1</li>
<li title="标签2">2</li>
<li title="标签3">3</li>
<li title="标签4">4</li>
<li title="标签5">5</li>
</ul>
</body>
</html>
<script>
$(function(){
var $alert = $("<div class='alert'></div>");
$alert.appendTo("body");
$("*").mouseenter(function(e){
var str = $(this).attr("title");
if(str){
$(this).removeAttr("title");
$(this).attr("data-title",str);
}
var title = $(this).attr("data-title");
if(title){
$alert.text(title);
$alert.show();
$alert.stop().animate({
"top":e.clientY+$("body").scrollTop(),
"left":e.clientX-$("body").scrollLeft()
},200)
}
})
$("*").mouseleave(function(e){
var title = $(this).attr("data-title");
if(title){
$(this).attr("title",title);
$(this).removeAttr("data-title")
}
$alert.hide();
})
})
</script>
Idea explanation
- Anyway, what I thought at the beginning was to block the original prompt function of the title, and then make my own prompt box, but I did not see the effect after searching for a long time. It is estimated that it is the same as the input radio. It is hard to write. It's like replacing the label with for.
- So I didn’t find a way to block it. Anyway, if we have a floating event, I will directly move the title to the data-title and wait for the mouse to move and put it back. Anyway, it’s okay without breaking the structure, and then I just need it. You can pull up your own prompt box by judging whether there is a title
- Just make a fixed positioning container and run it with the distance of the mouse movement. In other words, I also know that the original title can adjust the response speed, why can't it be blocked directly, I think I still can't find a way...
- Slipped away