鼠标悬停显示详细信息效果
来源:互联网 发布:linux mc服务器 编辑:程序博客网 时间:2024/05/18 15:07
<%@ 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>
<!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>
- 鼠标悬停显示详细信息效果
- jQuery购物图片中的鼠标悬停显示详细信息效果
- 实现http://www.wandoujia.com/中的鼠标悬停显示详细信息效果
- datagrid鼠标悬停效果
- 鼠标悬停效果
- 鼠标经过悬停效果
- 鼠标悬停效果
- css3鼠标悬停效果
- js菜单栏(以鼠标悬停到头像显示详细信息为例)
- 动态显示图片,并为hyperlink 做鼠标悬停效果
- jQuery 仿淘宝 鼠标悬停显示大图效果
- 鼠标悬停显示
- 鼠标悬停显示图片
- 鼠标点击显示详细信息
- DIV滚动 鼠标悬停效果
- 流行的鼠标悬停效果
- css3 鼠标悬停效果收集
- 鼠标悬停与点击效果
- Java Socket
- Redis几个认识误区
- Linux内核模块符号导出后无法调用问题
- 我为什么创建个人网站chentingpc.me
- 再谈java类型转换
- 鼠标悬停显示详细信息效果
- 【PM&PM】产品经理KPI的那些事
- qsort和sort的区别
- OllyDbg小知识【3】 - 功能学习小结
- 关于iOS的UIView的一点笔记
- Tomcat系统结构及原理
- 考研人
- 到底怎么了?
- Native Rss Reader 的资料