<html>
<head>
<title>又一个漂亮的JS鼠标提示特效 - www.webdm.cn</title>
<style type="text/css">
body{ font-size:9pt; line-height:140%;}
#dhtmltooltip{
position: absolute;
width: 162px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
</head><body>
<div id="dhtmltooltip"></div>
<p align="center">
<script type="text/javascript">
var offsetxpoint=-60
var offsetypoint=20
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
if (rightedge<tipobj.offsetWidth)
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
tipobj.style.left=curX+offsetxpoint+"px"
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
</p>
<div align="center">
<table border="1" width="498" height="35" cellspacing="5" cellpadding="2" bgcolor="#f8f8f8" style="border-collapse: collapse" bordercolor="#C0C0C0">
<tr>
<td>
<p align="center">
<a onMouseover="ddrivetip('这其实是一个链接提示效果封装类','#e3f1b1', 200)" ; onMouseout="hideddrivetip()" target="_blank" href="/">网页代码站</a>
<a onMouseover="ddrivetip('可以自设颜色值', 'skyblue', 105)" ; onMouseout="hideddrivetip()" target="_blank" href="/">Webdm.cn</a>
<a onMouseover="ddrivetip('使用起来很方便', '#e0eff5', 250)" ; onMouseout="hideddrivetip()" target="_blank" href="/">Baidu.com</a></td>
</tr>
</table>
</div>
</body>
</html>
分享到:
相关推荐
js 特效 html 特效 鼠标导出提示信息 js 特效 html 特效 鼠标导出提示信息
javascript实现鼠标旁边的提示信息特效,很实用
来自国外的一款放大图片的鼠标提示特效 一款鼠标提示效果,类似于放大图片,鼠标移到对应图片上,会显示出大图,能根据浏览器的显示距离将提示的图片显示在正确的位置上,把浏览器窗口调小就可以看到效果了。Js代码...
本文实例为大家分享了js鼠标特效实例代码,供大家参考,具体内容如下 实例一:禁用鼠标右键 [removed] //为文档的鼠标按下事件定义回调 [removed] = function(event){ //判断事件的值是否为鼠标右键 if (event....
JQuery 实现鼠标悬停的Tip链接提示特效,鼠标放在链接上,即可弹出链接提示框,有多种样式可定义。可以设置提示框样式,是圆角、直角,边框粗细,还可以在提示框内定义更加复杂的内容,比如图片、表格等,使用时需要...
js提示框特效制作多种js提示框效果,如js文字提示框,js图片提示框,js tooltip文字与图片提示框。一款很实用的js提示框插件。
CSS3鼠标滑过tip提示框动画特效是一款纯CSS3实现的鼠标经过提示特效。
鼠标划过显示提示tips特效代码是鼠标划过停留的时候可以看到提示信息。
JavaScript特效大全:控制Div属性 网页换肤 函数接收参数并弹出 用循环将三个Div变成红色 鼠标移入/移出改变样式 记住密码提示框 百度输入法 点击Div,显示其innerHTML 求出数组中所有数字的和 弹出层效果 函数传参,...
<link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" />... 这是一款使用HTML5 SVG来制作,并通过anime.js来制作非常炫酷的鼠标悬停弹性动画代码的弹性动画Tooltip提示框特效。
纯CSS实现的鼠标触及显示边框和描述的图片特效
鼠标移入即显示提示框,鼠标移出则不显示
javascript特效鼠标飘过弹出悬浮块
jquery结合Tipso.js插件实现的鼠标经过文字显示提示框特效源码.zip
jQuery tooltip鼠标提示层,jQuery CSS实现,鼠标移到链接文字上会弹出一个图片 文字的层提示框,鼠标移走后提示自动消失,特效代码来自国外的前端设计网站。这个链接提示层支持在弹出层中显示图片、文字和链接格式...
本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称“链接提示”,鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致...
当前位置:首 页→JavaScript 设为首页 | 加入收藏夹 | 站长信箱 JavaST分类 鼠标动作 日期时间 文本特效 图形特效 背景特效 状 态 栏 信息检测 警告提示 下拉菜单 窗口特效 按钮特效 智力游戏 实用...
包括一些网页设计常用的类的代码:时间日期类、鼠标事件类、状态烂特效、页面效果类、图形图象类、按钮特效类、文本特效类、智力游戏类、信息检测类、警告提示类、菜单类、窗口特效类、综合类,比如跟随鼠标的图形、...
30种CSS分页效果配色方案;...Js+Css图片切换,带缩略图响应鼠标滑过; JS图片滚动代码(无缝、平滑); 纯CSS实现链接提示(学习层定位); 适合企业站的DIV+CSS导航菜单; 用JavaScript在网页右下角弹出窗口; .......