Implementation of special effects for floating link pop-up pictures-JS Tutorial-php.cn

Implementation of special effects for floating link pop-up pictures

php中世界最好的语言

Release： 2018-04-26 11:01:42

Original

1889 people have browsed it

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>

Copy after login

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!