您的位置：首页 > 其它

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

2012-03-15 23:05 591 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航