`
feng88724
  • 浏览: 172778 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

在按钮上增加提示信息、背景可透明

    博客分类:
  • Java
阅读更多
首先,加入该DIV
<div id=pop
style=" position: absolute; width: 400;z-index: 11; display: none; background-color: #ffffdd"> 
</div>


然后加入两个js方法:
  function cc(tt,desc,summ) 
{ 
	var e = document.getElementById("pop"); 
	var t = tt.offsetTop; 		//TT控件的定位点高 
	var h = tt.clientHeight; 	//TT控件本身的高 
	var l = tt.offsetLeft; 		//TT控件的定位点宽 
	var ttyp = tt.type; 		//TT控件的类型 
	while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;} 
	e.style.top = (ttyp=="image")? t + h : t+10; 		//层的 Y 坐标 
	e.style.left = l + 50; 					//层的 X 坐标 
	e.style.display = "block"; 				//层显示 
	// e.innerText = "asdads"; ,${item.name},${item.name}
	e.innerHTML = "工具简介:"+desc+"<br>改版履历:"+summ;
} 
	function aaclear(){
		document.getElementById("pop").style.display = 'none';
	}


一个是当鼠标移上去时显示效果,另一个是当鼠标移开时清楚效果的。

好了,现在只需要在你需要的地方调用就可以了;

比如:

<a href="tool.do?method=toVersionList&name=${item.name}"
onmouseover="cc(this,'${item.description}','${item.summary}')" onmouseout="return aaclear();">${item.name}</a>



另外,如果你向让DIV透明,只需要把背景颜色去掉就OK了,即
style=" position: absolute; width: 400;z-index: 11; display: none; "
  • a.zip (677 Bytes)
  • 下载次数: 13
分享到:
评论

相关推荐

    透明窗体透明叠加窗体透明按钮透明输入框

    透明叠加窗体通常用于创建悬浮在其他应用程序上的小窗口,如通知或提示信息。实现方法是创建一个具有较低级别的 `TopMost` 属性的透明窗体,并在需要时显示。使用 `SetWindowLong` 和 `GetWindowLong` API 函数可以...

    动态图片+背景透明图片

    在IT行业中,动态图片与背景透明图片是设计领域中不可或缺的部分,特别是在用户界面(UI)设计、移动应用、网页设计以及各种数字媒体创作中。这些元素可以极大地提升用户体验,增加视觉吸引力,同时允许内容与背景...

    Android Dialog设置透明背景以及位置

    - 当Dialog背景透明时,注意避免内容与底层视图重叠,可能导致用户交互问题。 - 在处理Dialog位置时,考虑到不同设备的屏幕尺寸差异,最好采用相对单位而非绝对像素值。 - 使用`TYPE_APPLICATION_OVERLAY`权限...

    各种网页系统透明背景图标

    5. **图标的应用**:这些图标可以应用于网页的各种元素,如导航菜单、按钮、状态指示器、提示信息等。它们也可以作为品牌标识的一部分,展示公司的形象和风格。在响应式设计中,透明背景的图标尤其有用,因为它们能...

    使用浮动透明层来提示信息

    在网页设计和开发中,有时候我们需要向用户展示一些临时性的信息或者提示,而“使用浮动透明层来提示信息”就是一种高效且美观的实现方法。这种方法通常涉及到HTML、CSS以及JavaScript技术,通过创建一个透明的浮动...

    Xamarin.Android 悬浮框(背景半透明遮挡)

    这样的设计可以用于显示提示信息、设置菜单或者浮动操作按钮等。下面我们将详细探讨如何在Xamarin.Android中实现这样一个功能。 首先,我们需要了解Android的窗口管理器(WindowManager)服务,它是Android系统提供...

    PNG透明背景水晶图标

    3. **图示和标志**:在表示状态、提示信息或者品牌标志时,水晶图标能够传达清晰的信息,同时增添设计感。 4. **背景元素**:透明背景的水晶图标可以作为网页背景的一部分,与其他设计元素相互衬托,形成统一的视觉...

    web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    在微信中访问Web页面时...综上所述,"web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开"是解决微信内置浏览器限制的一种常见策略,它通过遮罩层和提示按钮,引导用户在更适合的环境下浏览Web页面,提升用户体验。

    javascript 半透明提示框 简单实用

    半透明提示框是指在网页上弹出的一个具有不完全透明背景的窗口,这样用户可以隐约看到背后的内容,但焦点仍然集中在提示框上。这种设计通常用于显示重要的通知或用户需要确认的事项。 要创建这样的提示框,我们需要...

    visual c++ vc自定义半透明对话框 显示半透明位图对话框和位图按钮.zip

    4. **atlimage.h头文件**:在压缩包中的错误信息提示,`Cannot open include file 'atlimage.h' No such file or directory`,表明在编译时找不到atlimage.h这个头文件。ATLImage是Active Template Library (ATL)的...

    VC自绘水晶按钮

    在MFC中,可以通过重载CButton类的OnPaint方法来自绘按钮,或者使用CToolTipCtrl类为按钮添加提示信息,提升用户体验。 此外,自绘按钮可能还会涉及到消息处理。在Windows编程中,每个窗口控件都会响应特定的消息,...

    MFC按钮控件

    至于“按钮提示功能”,通常称为工具提示,它们会在用户将鼠标悬停在按钮上一段时间后显示额外的信息。在MFC中,可以使用CToolTipCtrl类来创建和管理工具提示。首先,创建一个CToolTipCtrl对象,然后将其关联到按钮...

    PB9控件透明

    例如,可以创建一个半透明的提示框,用户可以看到提示信息的同时,还可以看到操作界面的背景。 **四、注意事项** - 实现透明时要考虑性能问题,过度使用透明可能导致应用程序运行变慢。 - 在处理透明控件时,需注意...

    Winform透明窗体/蒙板效果

    蒙板效果,或者说是蒙版,通常是指在窗体上覆盖一层半透明的色块,以达到部分遮挡或模糊背景的效果。这种效果可以用于提示信息、加载动画等场景,使用户关注特定区域。 在Winform中实现蒙板效果,通常需要创建一个...

    1288个晶莹剔透的水晶按钮图标

    在网页编程中,这些图标可以被用于各种目的,例如导航菜单、操作按钮、提示信息等。使用这些图标可以显著提升网页的可用性,因为图标比文字更能迅速引起用户的注意力,而且不受语言限制,全球用户都能理解。此外,...

    PPT常用的按钮模型

    3. **交互提示**:按钮上的文字标签应该清晰易懂,如“开始”、“结束”等,以便观众理解其功能。 4. **动画效果**:利用PPT的动画功能,可以使按钮在点击时有动态反馈,增加互动体验。 5. **对比度**:确保按钮与...

    纯css3 hover简单按钮悬停动画特效.zip

    1. **颜色过渡**:按钮背景色和文字颜色在悬停时渐变,增加视觉吸引力。 2. **缩放效果**:按钮在鼠标悬停时放大或缩小,提供视觉反馈。 3. **旋转效果**:按钮或按钮图标在悬停时旋转一定角度,增加趣味性。 4. **...

    Android新功能提示透明指示层

    这个功能允许开发者将提示信息锁定在特定的UI控件上,用户可以通过点击提示区域来逐个了解和学习新功能。 首先,我们来看看"MaterialShowcaseView"库。这个开源项目是实现上述功能的一个优秀选择,它的名称与提供的...

    AJAX弹出提示信息效果

    本项目以"AJAX弹出提示信息效果"为主题,实现了在弹出提示信息时页面背景色调变化的视觉效果,从而提供更美观且实用的用户体验。 首先,我们需要了解AJAX的基本工作原理。AJAX通过JavaScript创建XMLHttpRequest对象...

Global site tag (gtag.js) - Google Analytics