js+css制作悬浮提示层弹出特效

来源:互联网 发布:火狐浏览器优化版 编辑:程序博客网 时间:2024/05/16 15:18
<!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 name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备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_wwwzzjs_net{margin:0 auto;width:834px;text-align:center;margin-top:100px;height:201px;background:#ffffdd;border:2px solid #e3e197;}
  #div_wwwzzjs_net 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_zzjs_net{margin-left:35px;}
  *html #menu_zzjs_net{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_zzjs_net=function(){
  for(i=1;i<=this.ialllisst;i++){
   if(D("newlist"+i).style.visibility="hidden"){
    D("newlist"+i).style.visibility="hidden";
   }
  }//欢迎来到站长特效z网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
  D(this.newlist).style.visibility="visible";
  oTempsong.display();
 }
 oTempsong.up_wwwzzjsnet=function(){
  oTempsong.disappear();
 }//欢迎来到站长z特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
 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);
 }//欢迎来到站z长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
 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;
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
var zzjs=creatediv("wwwzzjsnet",1,"menu_zzjs_net",3);
-->
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
  <div id="demo">
    <ul id="div_wwwzzjs_net">
      <li id="menu_zzjs_net">
        <a href="http://www.zzjs.net" title="站长特效网" id="wwwzzjsnet" onmouseover="zzjs.down_zzjs_net()" onmouseout="zzjs.up_wwwzzjsnet()">站长提示您把鼠标放到这里</a>
        <div id="newdiv1" class="newdiv">
          <div>站长特效网,一质量为核心,以实用为目的,打造一流网页特效站!</div>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>
0 0
原创粉丝点击