Home > Article > Backend Development > jquery simulates title prompt effect
jquery simulates title prompt effect
- 小云云Original
- 2017-11-17 10:06:261551browse
jQuery is a cross-browser JavaScript library that simplifies operations between HTML and JavaScript. The first version was released by John Resig at BarCamp NYC in January 2006. It is currently being developed by a development team led by Dave Methvin. 59% of the world's top 10,000 most visited websites use jQuery, which is currently the most popular JavaScript library.
In this article we mainly introduce the effect of jquery simulating title prompts. Did we know that When the length of text characters is limited, some long titles will always be truncated. Using title prompts is simple but simple It will cause redundancy in the page html code. Here, jquery is used to create a simulated title prompt effect. The specific code is as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的简单文字提示效果</title>
<script src="http://www.phpernote.com/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#pt_phpernote{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px;
color:#333;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript">
$(function(){
var x=10,y=20;
$("a.pt").mouseover(function(e){
$("body").append("<div id='pt_phpernote'>"+ this.text+"<\/div>");
$("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");
}).mouseout(function(){
$("#pt_phpernote").remove();
}).mousemove(function(e){
$("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
});
})
</script>
</head>
<body>
<p><a href="#" class="pt">php cli下接受参数的几种方法</a></p>
</body>
</html>The above is the entire content of jquery's simulated title prompt effect. I hope it will be useful to everyone. help.
Related recommendations:
What is the difference between JS and JQUERY
How to use jQuery to achieve the magnifying glass effect
How to set up scheduled refresh in jquery
jQuery selector example sharing about attribute filter selector
The above is the detailed content of jquery simulates title prompt effect. For more information, please follow other related articles on the PHP Chinese website!