有关鼠标滑过按钮出现气泡!!(MFC新手)

发布网友发布时间：2022-04-23 09:02

共2个回答

懂视网时间：2022-04-23 13:23

鼠标特效现在也层出不穷，本文主要为大家带来一篇鼠标经过出现气泡框的简单实例，小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能让更好的掌握鼠标特效。

今天看到一个css效果不错，转一下

1. 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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Animated Menu Hover 1</title> 
 
<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script> 
 
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(".menu li").hover(function() { 
 $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); 
 }, function() { 
 $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); 
 }); 
}); 
</script> 
 
<style type="text/css"> 
body { 
 margin: 10px auto; 
 width: 570px; 
 font: 75%/120% Arial, Helvetica, sans-serif; 
} 
.menu { 
 margin: 100px 0 0; 
 padding: 0; 
 list-style: none; 
} 
.menu li { 
 padding: 0; 
 margin: 0 2px; 
 float: left; 
 position: relative; 
 text-align: center; 
} 
.menu a { 
 padding: 14px 10px; 
 display: block; 
 color: #000000; 
 width: 144px; 
 text-decoration: none; 
 font-weight: bold; 
 background: url('http://files.jb51.net/file_images/article/201703/button.gif') no-repeat center center; 
} 
.menu li em { 
 background: url('http://files.jb51.net/file_images/article/201703/hover.jpg') no-repeat; 
 width: 180px; 
 height: 45px; 
 position: absolute; 
 top: -85px; 
 left: -15px; 
 text-align: center; 
 padding: 20px 12px 10px; 
 font-style: normal; 
 z-index: 2; 
 display: none; 
} 
</style> 
</head> 
 
<body> 
 
<ul class="menu"> 
 <li> 
 <a href=http://www.gxlcms.com rel="external nofollow" >Web Designer Wall</a> 
 <em>A wall of design ideas, web trends, and tutorials</em> 
 </li> 
 <li> 
 <a href="http://www.gxlcms.com" rel="external nofollow" >Best Web Gallery</a> 
 
 <em>Featuring the best CSS and Flash web sites</em> 
 </li> 
 <li> 
 <a href="http://www.gxlcms.com" rel="external nofollow" >N.Design Studio</a> 
 <em>Blog and design portfolio of WDW designer, Nick La</em> 
 </li> 
</ul> 
 
</body> 
</html>

2. js

<script type="text/javascript"> 
$(document).ready(function(){ 
 $(".menu li").hover(function() { 
 $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); 
 }, function() { 
 $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); 
 }); 
}); 
</script>

3. 效果图

大家学会了吗？赶紧动手尝试一下吧。

热心网友时间：2022-04-23 10:31

vc自带吧

在对话框类的.h文件里 CToolTipCtrl m_tooltip;

在对话框初始化函数InitDialog函数里初始化tooltip：
EnableToolTips(TRUE);
m_tooltip.Create(this, TTS_ALWAYSTIP|TTS_BALLOON);
m_tooltip.Activate(TRUE);
m_tooltip.AddTool(this, 104);

RECT lprc;
m_tooltip.GetMargin(&lprc);
lprc.left += 2;
lprc.top += 2;
lprc.right += 2;
lprc.bottom += 2;
m_tooltip.SetMargin(&lprc);

m_tooltip.SetTipBkColor(bkColor);
m_tooltipAttr.tooltip_delayTimeBefore = delayTimePre;
m_tooltipAttr.tooltip_delayTimeLater = delayTimeLater;
m_tooltip.SetDelayTime(delayTimePre);/*Set delay time before showing tool tip when the mouse moved on the
button. (millisecond)*/
m_tooltip.SetDelayTime(TTDT_INITIAL, delayTimeLater);/*Set delay time after showing tool tip. */
m_tooltip.SetMaxTipWidth(width);/*Set max width to decide whether to line feed. (millisecond)*/

m_tooltip.SetTipTextColor(RGB(11, 111, 11));
m_tooltip.UpdateTipText(_T("标题栏"), this);
m_tooltip.Update();

m_tooltip.SetTipTextColor(m_tooltipAttr.bt_tooltip[now].color);
m_tooltip.UpdateTipText(text, this);

m_tooltip.Update();
m_tooltip.Activate(TRUE);
MSG msg;
msg.hwnd = this->m_hWnd;
msg.message = WM_MOUSEMOVE;
msg.lParam = MAKELPARAM(point.x, point.y);
msg.wParam = 0;
GetCursorPos(&msg.pt);
msg.time = GetTickCount();
KillTimer(5);
m_tooltip.RelayEvent(&msg);
SetTimer(5, m_tooltipAttr.tooltip_delayTimeBefore + m_tooltipAttr.tooltip_delayTimeLater, NULL);

你搜一下CTooltipCtrl这个类的成员函数用法，已经很久没写这个代码，上边的代码只是找的写过的代码，大概会用到这些函数。