鼠标悬停显示详细信息效果

最新推荐文章于 2022-04-22 11:26:24 发布

letIgo

最新推荐文章于 2022-04-22 11:26:24 发布

阅读量3.7k

点赞数

文章标签： function xhtml server jquery border div

本文链接：https://blog.csdn.net/letIgo/article/details/7359041

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
<title></title>
<style type="text/css">
img{ width:80px; height:80px;}
#d1{ display:none; border:1px solid #eee; background-color:#eee; width:200px; position:absolute;}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('img').hover(function (e) {
var src1 = $(this).attr('src');
//alert(src1);
if (src1 == 'images/林黛玉.jpg') {
$('#d1').text('这是美女林黛玉哦~和大厦电话阿訇多卡仕达阿卡活动卡大家爱上');
$('#d1').animate({ top: '25px', left: '80px' }).show();
}
else if (src1 == 'images/林志玲.jpg') {
$('#d1').text('这是美女林志玲哦~');
$('#d1').animate({ top: '25px', left: '160px' }).show();
}
else if (src1 == 'images/林心如.jpg') {
$('#d1').text('这是美女林心如哦~');
$('#d1').animate({ top: '25px', left: '260px' }).show();
}
else {
$('#d1').text('这是帅哥林志颖哦~');
$('#d1').animate({ top: '25px', left: '340px' }).show();
}
}, function () {
$('#d1').hide();
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#"><img alt="" src="images/林黛玉.jpg" /></a>
<a href="#"><img alt="" src="images/林志玲.jpg" /></a>
<a href="#"><img alt="" src="images/林心如.jpg" /></a>
<a href="#"><img alt="" src="images/林志颖.jpg" /></a>
</div>
<div id="d1"></div>
</form>
</body>
</html>