Move the mouse over the larger picture with preview.
This article mainly introduces how to achieve the effect of a preview large image by swiping the mouse. For more information, see
When you move the mouse over an image, a preview of the image will appear, and the text below the big picture will be introduced.
The Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "image prompt effect. aspx. cs" Inherits = "image prompt effect" %>
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
. Aa {
Width: 88px;
Height: 100px;
}
</Style>
<Script type = "text/javascript" src = "Scripts/jquery-1.7.1.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var x = 10;
Var y = 20;
$ ("A. tooltip"). mouseover (function (e ){
This. myTitle = this. title;
This. title = "";
Var imgTitle = this. myTitle? "<Br/>" + this. myTitle :"";
Var tooltip = "<div id = 'tooltip '> element
$ ("Body"). append (tooltip); // append it to text
$ ("# Tooltip ")
. Css ({
"Top": (e. pageY + y) + "px ",
"Left": (e. pageX + x) + "px"
}). Show ("fast"); // sets the x and y coordinates and displays
}). Mouseout (function (){
This. title = this. myTitle;
$ ("# Tooltip"). remove (); // remove
}). Mousemove (function (e ){
$ ("# Tooltip ")
. Css ({
"Top": (e. pageY + y) + "px ",
"Left": (e. pageX + x) + "px"
});
});
})
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<A href = "image/4.jpg" class =" tooltip "title =" Shoes "> </a>
<A href = "image/5.jpg" class =" tooltip "title =" glove "> </a>
<A href = "image/6.jpg" class =" tooltip "title =" skirt "> </a>
<A href = "image/7.jpg" class =" tooltip "title =" "> </a>
</Div>
</Form>
</Body>
</Html>