jQuery mouse hover link pop-up follow image example code

jQuery mouse hover link pop-up follow image example code_javascript skills

WBOY

Release： 2016-05-16 15:21:10

Original

1234 people have browsed it

This article introduces a commonly used effect, that is, when the mouse slides over a link, a layer that follows the movement of the mouse pointer can appear. In practical applications, it is usually some explanatory text or pictures for the link, etc. Wait, here is the code example:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>脚本之家</title>
<style type="text/css">
body{
 margin:0;
 padding:40px;
 background:#fff;
 font:80% Arial, Helvetica, sans-serif;
 color:#555;
 line-height:180%;
}
a{
 text-decoration:none;
 color:#f30; 
}
p{
 clear:both;
 margin:0;
 padding:.5em 0;
}
img{border:none;}
#screenshot{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
this.screenshotPreview=function(){ 
 xOffset = 10;
 yOffset = 30;
 $("a.screenshot").hover(function(e){
 this.t = this.title;
 var c = (this.t != "") &#63; "<br/>" + this.t : "";
 $("body").append("<p id='screenshot'><img src='"+this.rel+"' />"+c+"</p>");   
 $("#screenshot")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast");  
 },
 function(){
 this.title = this.t; 
 $("#screenshot").remove();
 }); 
 $("a.screenshot").mousemove(function(e){
 $("#screenshot")
 .css("top",(e.pageY-xOffset)+"px")
 .css("left",(e.pageX+yOffset)+"px");
 }); 
};
$(document).ready(function(){
 screenshotPreview();
});
</script>
</head>
<body>
<a href="#" class="screenshot" title="蚂蚁部落" rel="mytest/demo/thesmall.jpg">蚂蚁部落</a>欢迎您
</body>
</html>

Copy after login

Rendering:

The above code achieves our requirements. Here is a brief introduction to the implementation process:
Code comments:
1.this.screenshotPreview=function(){ }, declares a function to implement the following effect. In this effect, this can actually be omitted, it points to the window.
2.xOffset=10, declares a variable to specify the horizontal distance of the mouse pointer from the pop-up image.
3.yOffset=30, declares a variable to specify the vertical distance of the mouse pointer from the pop-up image.
4.$("a.screenshot").hover(function(e){}, function(e){}), specifies when the mouse moves to the link and leaves the link. function to execute.
5.this.t = this.title, assign the link’s title attribute value to the t attribute, where this is the pointer to The link object currently hovered by the mouse.
6.var c = (this.t != "") ? "
" + this.t : "",If this.t is not empty , that is, if the title attribute value exists, then insert a newline character and connect the current title content, otherwise set c to empty.
7.$("body").append("

"+ c +"

"), Add pictures and related descriptions to the body.
8.$("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+" px").fadeIn("fast"), sets the top and left attribute values of the p element, and uses the fade-in effect to display.
9.this.title=this.t, Assign the title content to this.title. In fact, there is no problem without this sentence, it is a bit redundant.
10.$("#screenshot").remove(), Remove the p element.
11.$("a.screenshot").mousemove(function(e){}), is used to set the picture to follow when the mouse pointer moves.
12.$("#screenshot").css("top",(e.pageY-xOffset)+"px") .css("left",(e.pageX+yOffset)+" px"), sets the top and left attribute values of the p element to achieve the following effect.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.