js+css制作鼠标感应悬浮提示层弹出特效

1周前 (04-25 21:15)阅读13回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4019
  • 级别管理员
  • 主题803
  • 回复2
楼主

这是一个鼠标感应弹出提示层特效,当用户的鼠标经过链接时,会弹出一个动画效果的悬浮红色提示层,可自定义。

<!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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>js+css制作鼠标感应悬浮提示层弹出特效_武鸣人</title>
<style type="text/css">
   body,ul,li{margin:0;padding:0;}
   body{background:#cecccc;text-align:center;}
   a{font-size:14px;font-weight:bold;text-decoration:none;}
   a:hover{text-decoration:underline;}
  #div_wwwwuming_ren{margin:0 auto;width:834px;text-align:center;margin-top:50px;height:201px;background:#ffffdd;border:2px solid #e3e197;}
  #div_wwwwuming_ren li{float:left;width:207px;height:54px;line-height:54px;list-style:none;margin-top:70px;position:relative;}
  .newdiv{height:85px;width:135px;position:absolute;top:20px;background:red;left:30px;padding:0px; visibility:hidden;}
  .newdiv div{color:#fff;font-size:12px;height:20px;position:relative;top:10px;left:0px;line-height:12px;}
  #menu_wuming_ren{margin-left:35px;}
  *html #menu_wuming_ren{margin-left:17px;}
</style>
<script type="text/javascript">
<!--
var speed=-60; 
var aspeed=-80;
var show=0.1;
var ieshow=5;
var comshow=1;
var comieshow=100;
var D=new Function('obj','return document.getElementById(obj);')
function creatediv(isongname,ilist,imainli,ialllist){
 var oTempsong=new Object;
 oTempsong.songname=isongname;
 oTempsong.alllist=ialllist;
 oTempsong.list=ilist;
 oTempsong.newlist="newdiv"+ilist;
 oTempsong.mainli=imainli;
 oTempsong.down_wuming_ren=function(){
  for(i=1;i<=this.ialllisst;i++){
   if(D("newlist"+i).style.visibility="hidden"){
    D("newlist"+i).style.visibility="hidden";
   }
  }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
  D(this.newlist).style.visibility="visible";
  oTempsong.display();
 }
 oTempsong.up_wwwwumingren=function(){
  oTempsong.disappear();
 }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 oTempsong.display=function(){
  window.Obj=this;
  D(Obj.newlist).style.top=speed+"px";
  show+=0.05;
  ieshow+=5;
  D(Obj.newlist).style.opacity=show;
  D(Obj.newlist).style.filter="alpha(opacity="+ieshow+")";
  speed--;
  if(speed<=-80){window.clearTimeout(timer);speed=-60;show=0.1;ieshow=10;return;}
  var timer=setTimeout('Obj.display()',7);
 }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 oTempsong.disappear=function(){
  window.Obj=this;
  D(oTempsong.newlist).style.top=aspeed+"px";
  comshow-=0.05;
  comieshow-=5;
  D(Obj.newlist).style.opacity=comshow;
  D(Obj.newlist).style.filter="alpha(opacity="+comieshow+")";
  aspeed++;
  if(aspeed>=-60){window.clearTimeout(timer);D(Obj.newlist).style.visibility="hidden";aspeed=-80;comshow=1;comieshow=100;return;}
  var timer=setTimeout('Obj.disappear()',4);
 } 
 return oTempsong;
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
var wuming=creatediv("wwwwumingren",1,"menu_wuming_ren",3);
-->
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
  <div id="demo">
    <ul id="div_wwwwuming_ren">
      <li id="menu_wuming_ren">
        <a href="https://www.wuming.ren" title="武鸣人" id="wwwwumingren" onmouseover="wuming.down_wuming_ren()" onmouseout="wuming.up_wwwwumingren()">武鸣提示您把鼠标放到这里</a>
        <div id="newdiv1" class="newdiv">
          <div>武鸣人,各种信息免费发布,资源共享合作共赢!</div>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>


0
0
收藏0
回帖

js+css制作鼠标感应悬浮提示层弹出特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息