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>
< 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"
});
});
})
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