JQuery 学习笔记（一）超链接和图片提示效果

约定不等于承诺〃 2022-01-10 01:11 74阅读 0赞

html 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
< HTML >  
< HEAD >  
< TITLE >图片显示效果 </TITLE>  
< SCRIPT SRC ="../js/jquery-1.4.2.min.js" TYPE ="text/javascript" > </SCRIPT>  
< SCRIPT SRC ="../js/one.js" TYPE ="text/javascript" > </SCRIPT>  
</HEAD>  
< style type ="text/css" >  
\*\{ margin:5px; padding:0px;\}  
ul li\{  
list-style-type: none;  
display: inline;  
\}  
</style>  
< BODY >  
< ul >  
< li > < a href ="C:/WINDOWS/Web/Wallpaper/01.jpg" title ="图片1" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/01.jpg" WIDTH ="80" HEIGHT ="80" BORDER ="0" ALT ="图片1" > </a> </li>  
< li > < a href ="C:/WINDOWS/Web/Wallpaper/02.jpg" title ="图片2" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/02.jpg" WIDTH ="80" HEIGHT ="80" BORDER ="0" ALT ="图片2" > </a> </li>  
< li > < a href ="C:/WINDOWS/Web/Wallpaper/03.jpg" title ="图片3" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/03.jpg" WIDTH ="80" HEIGHT ="80" BORDER ="0" ALT ="图片3" > </a> </li>  
< li > < a href ="C:/WINDOWS/Web/Wallpaper/04.jpg" title ="图片4" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/04.jpg" WIDTH ="80" HEIGHT ="80e" BORDER ="0" ALT ="图片4" > </a> </li>  
</ul>  
</BODY>  
</HTML>

JQuery代码：

$( function()\{  
var x=5;  
var y=5;  
$( "a.tooltip").mouseover( function(e)\{  
this.myTitle = this.title;  
this.title = "";  
var imgTitle = this.myTitle ? "<br/>" \+ this.myTitle: " ";  
var tooltip = "<div id='tooltip'> <img src='" \+ this.href + "' alt='图片1' WIDTH='400' HEIGHT='400' />" \+imgTitle+ "</div>"; //创建<div>元素   
$( "body").append(tooltip); //将tooltip追加到文档中   
$( "\#tooltip").css(\{  
"top" : (e.pageY+y) + "px",  
"left" : (e.pageX+x) + "px"  
\}).show( "fast"); //设置x坐标和y坐标，并且显示   
\}).mouseout( function()\{  
this.title= this.myTitle;  
$( "\#tooltip").remove(); //移除 tooltip <div> 元素   
\}).mouseout( function(e)\{  
$( "\#tooltip").css(\{  
"top" : (e.pageY+y) + "px",  
"left" : (e.pageX+x) + "px"  
\});  
\});  
\})

转载于:https://blog.51cto.com/strugglelinux/309799