Home >Web Front-end >JS Tutorial >Implementation of special effects for floating link pop-up pictures

Implementation of special effects for floating link pop-up pictures

php中世界最好的语言Original: 2018-04-26 11:01:421941browse

This time I will bring you the floating link pop-upPicture special effectsimplementation, what are the notes for the implementation of the floating link pop-up picture special effects, the following is a practical case, let’s take a look.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>PHP</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 != "") ? "<br/>" + this.t : "";
 $("body").append("<p id=&#39;screenshot&#39;><img src=&#39;"+this.rel+"&#39; />"+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>

Code comments:
1.this.screenshotPreview=function(){ },Declare a function to implement following Effect, in this effect, this can actually be omitted, it points to the window.
2.xOffset=10, Declare a variable to specify the horizontal distance of the mouse pointer from the pop-up image.
3.yOffset=30, Declare a variable to specify the vertical distance of the mouse pointer from the pop-up image.
4.$("a.screenshot").hover(function(e){}, function(e){}), stipulates that when the mouse moves to the link and The function to be executed when leaving the link.
5.this.t = this.title,Assign the value of the title attribute of the link to the t attribute, here this is the link object pointing to the current mouse hover.
6.var c = (this.t != "") ? "
" this.t : "",If this.t is not Is empty, that is, 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 "< ;/p>"), Add pictures and related descriptions to body.
8.$("#screenshot").css("top",(e.pageY-xOffset) "px").css("left",(e.pageX yOffset) " px").fadeIn("fast"), Set the top and left attribute values of the p element, and use 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"), Set the top and left attribute values of the p element to achieve the following effect.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Implementation of special effects for floating link pop-up pictures

Related articles