特效代码：非常漂亮的鼠标提示的信息

最新推荐文章于 2023-10-05 13:04:02 发布
最新推荐文章于 2023-10-05 13:04:02 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript经典实例 文章标签： javascript function class null table filter
<style>
.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}
</style>
<script language="JavaScript">
//more javascript from http://www.webjx.com
<!--
var pltsPop=null;
var pltsoffsetX = 10;　 // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var pltsoffsetY = 15;　// 弹出窗口位于鼠标下方的距离；3-12 合适
var pltsPopbg="#FFFFEE"; //背景色
var pltsPopfg="#111111"; //前景色
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
　　document.onmouseover　 = plts;
　　document.onmousemove = moveToMouseLoc;
}
function plts()
{　var o=event.srcElement;
　　if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
　　if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
　　pltsPop=o.dypop;
　　if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
　　{
　　　 pltsTipLayer.style.left=-1000;
　　　 pltsTipLayer.style.display='';
　　　 var Msg=pltsPop.replace(/ /g,"<br>");
　　　 Msg=Msg.replace(/x13/g,"<br>");
　　　 var re=/{(.[^{]*)}/ig;
　　　 if(!re.test(Msg))pltsTitle="<font color=#ffffff>简介</font>";
　　　 else{
　　　　 re=/{(.[^{]*)}(.*)/ig;
　　　　　 pltsTitle=Msg.replace(re,"$1")+" ";
　　　　 re=/{(.[^{]*)}/ig;
　　　　 Msg=Msg.replace(re,"");
　　　　 Msg=Msg.replace("<br>","");}
　　　　 //var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
　　　　　　　var content =
　　　　　　 '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">'+
　　　　　　 '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↗</font></b></th></tr>'+
　　　　　　 '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
　　　　　　 '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↘</font></b></th></tr>'+
　　　　　　 '</table></td></tr></table>';
　　　　　　　pltsTipLayer.innerHTML=content;
　　　　　　　toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
　　　　　　　moveToMouseLoc();
　　　　　　　return true;
　　　 }
　　else
　　{
　　　　　 pltsTipLayer.innerHTML='';
　　　　　　 pltsTipLayer.style.display='none';
　　　　　　　return true;
　　}
}
function moveToMouseLoc()
{
　　　 if(pltsTipLayer.innerHTML=='')return true;
　　　 var MouseX=event.x;
　　　 var MouseY=event.y;
　　　 //window.status=event.y;
　　　 var popHeight=pltsTipLayer.clientHeight;
　　　 var popWidth=pltsTipLayer.clientWidth;
　　　 if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
　　　 {
　　　　　　　　popTopAdjust=-popHeight-pltsoffsetY*1.5;
　　　　　　　　pltsPoptop.style.display="none";
　　　　　　　　pltsPopbot.style.display="";
　　　 }
　　　　else
　　　 {
　　　　　　　　 popTopAdjust=0;
　　　　　　　　pltsPoptop.style.display="";
　　　　　　　　pltsPopbot.style.display="none";
　　　 }
　　　 if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
　　　 {
　　　　　　　popLeftAdjust=-popWidth-pltsoffsetX*2;
　　　　　　　topleft.style.display="none";
　　　　　　　botleft.style.display="none";
　　　　　　　topright.style.display="";
　　　　　　　botright.style.display="";
　　　 }
　　　 else
　　　 {
　　　　　　　popLeftAdjust=0;
　　　　　　　topleft.style.display="";
　　　　　　　botleft.style.display="";
　　　　　　　topright.style.display="none";
　　　　　　　botright.style.display="none";
　　　 }
　　　 pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
　　　 pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
　　　　 return true;
}
pltsinits();
//-->
</script>
</HEAD>
<BODY>
<div title="论成败，人生豪迈，大不了重头再来！">Michael Chan</div>
</BODY>
</HTML> 
etilm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
鼠标划过显示提示tips特效特效代码
03-20
鼠标划过显示提示tips特效代码是鼠标划过停留的时候可以看到提示信息。
html好看鼠标光标特效
xcLeigh
08-22 9562
html好看鼠标光标特效,包括自定义鼠标指针图案，和自定义鼠标点击特效（鼠标点击出现爱心特效，每次颜色不一样。），好看的鼠标特效，好看的鼠标指针，自定义光标样式。
国庆发生的那些事儿------编写了炫酷的HTML动态鼠标特效，超级炫酷酷酷！
最新发布
sky-stars的博客
10-05 925
国庆假期的欢乐，当然少不了编码爱好者！假期编写了炫酷的HTML动态鼠标特效，超级炫酷酷酷！让你的页面变得更加炫酷，让你的小伙伴们羡慕的大神编码！快来看看大神是如何编写的吧！炫酷的HTML动态鼠标特效，超级炫酷酷酷！让你的页面变得更加炫酷，让你的小伙伴们羡慕的大神编码！快来看看大神是如何编写的吧！
web鼠标特效案例
qq1092881420的博客
01-25 498
鼠标特效的代码演示和代码。
鼠标提示——在鼠标当前位置显示提示信息
My life
06-01 2264
 document.write(";background-color:#ffdfd0; height: 19px; left: 77px; top: 96px/">");function showtip(text)  //显示链接的说明{  if (document.all&&document.readyState=="complete")  //针对IE  {    document.all
jQuery鼠标悬停提示框美化特效代码
03-20
jQuery鼠标悬停提示框美化代码基于jquery-1.7.2.min.js制作，包括上边、左边、右边、下边四种鼠标悬停提示框样式代码。
鼠标移到图片悬浮提示特效代码
03-20
鼠标移到图片悬浮提示是一款基于jquery实现的响应式大图悬浮弹窗提示工具。
jquery实现美观的导航菜单鼠标提示特效代码
10-23
主要介绍了jquery实现美观的导航菜单鼠标提示特效代码,涉及jquery鼠标事件及页面animate动画的使用技巧,非常具有实用价值,需要的朋友可以参考下
鼠标划过显示提示tips特效代码.zip
07-04
鼠标划过显示提示tips特效代码是鼠标划过停留的时候可以看到提示信息。
jQuery鼠标指针光标移动特效特效代码
03-20
jQuery鼠标指针光标移动特效是一款蓝色圆圈波纹跟随鼠标移动动画特效。
10个经典的网页鼠标特效代码
11-27
1、鼠标指向出现实用特殊提示 <!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" /> <meta http-equiv="Content-Language" conte
懒人原生自定义鼠标光标特效
06-11
效果描述： 我们在微博上经常看到鼠标悬停图片上的时候 会有一个放大镜或者缩小的图标手势 在css里有一个属性cursor，默认提供了很多方法 但是没有一个我们想要的，怎么办呢 这个时候就需要自定义一个cur文件作为背景图片即可 其实很简单，只要我们善于去发现 使用方法： 将cur做为样式的背景图片即可，详见案例代码
7款非常漂亮的CSS3鼠标hover图片动画特效.zip
07-11
<body>[removed][removed] Puff Open Perspective Rotate Slide Tin Bomb 7款基于magic.css来实现，可以制作出非常漂亮的鼠标hover图片效果的CSS3鼠标hover图片动画特效。
JavaScript鼠标轨迹特效
lianxiaoxiang的博客
03-15 258
百度前端技术学院的一个作业
一段有趣的HTML鼠标特效代码
weixin_48637535的博客
08-17 3570
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> <script src="/js/blog-common.min.js?v=mbEe3Az_jUnvf0dhJJ.
教你用JavaScript制作鼠标特效
小院里的霍大侠
12-07 1632
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
十大炫酷鼠标点击效果和页面
热门推荐
m0_58849641的博客
08-02 5万+
代码】十大炫酷鼠标点击效果和页面。
JS特效(鼠标特效)
代码改变生活
09-05 2348
1.鼠标移入文本框边手型特效： $("#Text1").mouseover(function () { document.getElementById("Text1").style.cursor = "pointer";//手型 }); $("#Text1").mouseout(function () { doc
网页特效代码
05-26
以下是一个简单的网页特效代码示例，用于在鼠标悬停在文本上时显示一个提示框： ```html <!DOCTYPE html> 网页特效 .tooltip { position: relative; display: inline-block; border-bottom: 1px ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值