jQuery图片提示

最新推荐文章于 2025-11-05 20:48:02 发布

转载最新推荐文章于 2025-11-05 20:48:02 发布 · 375 阅读

文章标签：

#jquery #function #class #xhtml #border #div

本文介绍了一种使用jQuery实现的图片提示效果。当鼠标悬停在小图上时，会显示包含大图及标题的提示框，并跟随鼠标移动。此方法通过创建动态div元素并利用jQuery的事件处理来实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js " type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}

/* tip */
#tip{
position:absolute;
border:1px solid #999;
background:#999;
padding:2px;
display:none;
color:#fff;
font-weight:bold;
}
</style>
<script type="text/javascript">
$(function(){
    var x = 10;
var y = 20;
    $("a.tip").mouseover(function(e){
       myTitle = this.title;
this.title = "";
     var $tip = $("<div id='tip'><img src='"+this.href+"' alt='123' />"+"<br />"+myTitle+"<//div>"); //创建 div 元素
$("body").append($tip); //把它追加到文档中
$("#tip").show("fast");   //设置x坐标和y坐标，并且显示
   }).mouseout(function(e){
       $("#tip").remove();
    this.title = myTitle;
   }).mousemove(function(e){
       $("#tip")
   .css({
    "top": (e.pageY+y) + "px",
    "left": (e.pageX+x) + "px"
   });
   })
})
</script>

</head>
<body>
<h3>效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>

</body>
</html>