search

Home  >  Article  >  Web Front-end  >  jQuery mouse hover link pop-up follow image example code_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:21:101216browse

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>

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 != "") ? "076402276aae5dbec7f672f8f4e5cc81" + 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("15918063f12c8a89e603632d0a3ad0851e2ca9f7ae26f1b0915e4ba50bb24a11"+ c +" 94b3e26ee717c64999d7867364b1b4a3"), 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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed examples of JSON data format and json format data field string conversion_javascript skillsNext article：Detailed examples of JSON data format and json format data field string conversion_javascript skills

Related articles

See more