网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 JS实现响应鼠标点击动画渐变弹出层效果代码
范文
    本文实例讲述了JS实现响应鼠标点击动画渐变弹出层效果。分享给大家供大家参考，具体如下：
    <!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" />
    <title>动画弹出层</title>
    <style>
    .list{
     position:relative;;
     background:#eee;
     border:1px #ccc solid;
     margin:10px;
     height:30px;
     width:100px;
     cursor :pointer ;
    }
    .listShow{
     position:relative;
     background:#eff;
     border:1px #ddd solid;
     margin:10px;
     height:30px;
     width:100px;
     cursor :pointer ;
    }
    .comment{
     position:absolute;
     left:0;
     display:none;
     position:absolute;
     border:1px #ccc solid;
     background:#fee;
     width:200px;
     height:200px;
     overflow:hidden;
     z-index:100;
    }
    </style>
    </head>
    <body>
    <div id="show">
    0
    </div>
    <div id="list1">1
     <div id="comment1">脚本之家<br/>
    </div>
    <div id="list2">2
     <div id="comment2">新浪搜狐</div>
    </div>
    <div id="list3">3
     <div id="comment3">网页特效</div>
    </div>
    </body>
    </html>
    <script>
     var zindex=0;
     function $id(id){
     return document.getElementById(id);
     }
     var Bind = function(object,fun){
     var args = Array.prototype.slice.call(arguments).slice(2);
     return function(){
      return fun.apply(object,args);
     }
     }
     function addEventHandler(oTarget, sEventType, fnHandler){
      if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}
      else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}
      else{oTarget['on' + sEventType] = fnHandler;}
     }
     var Shower=function(){
     this.list=null;
     this.comment=null;
     this.moveLeft=80;
     this.moveTop=20;
     this.height=150;
     this.width=250;
     this.time=800;
     this.init=function(lisObj,comObj){
      this.list=lisObj;
      this.comment=comObj;
      var _this=this;
      this._fnMove=Bind(this,this.move);
      (function(){
      var obj=_this;
      addEventHandler(obj.list,"click",obj._fnMove);
      })();
     };
     this.move=function(){
      var _this=this;
      var w=0;
      var h=0;
      var height=0; //弹出div的高
      var width=0; //弹出div的宽
      var t=0;
      var startTime = new Date().getTime();//开始执行的时间
      if(!_this.comment.style.display||_this.comment.style.display=="none"){
       _this.comment.style.display="block";
       _this.comment.style.height=0+"px";
       _this.comment.style.width=0+"px";
       _this.list.style.zIndex=++zindex;
       _this.list.className="listShow";
       var comment=_this.comment.innerHTML;
       _this.comment.innerHTML=""; //去掉显示内容
       var timer=setInterval(function(){
       var newTime = new Date().getTime();
       var timestamp = newTime - startTime;
       _this.comment.style.left=Math.ceil(w)+"px";
       _this.comment.style.top=Math.ceil(h)+"px";
       _this.comment.style.height=height+"px";
       _this.comment.style.width=width+"px";
       t++;
      var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量
       w=_this.moveLeft*change;
       h=_this.moveTop*change;
       height=_this.height*change;
       width=_this.width*change;
       $id("show").innerHTML=w;
        if(w>_this.moveLeft){
    clearInterval(timer);
    _this.comment.style.left=_this.moveLeft+"px";
    _this.comment.style.top=_this.moveTop+"px";
    _this.comment.style.height=_this.height+"px";
    _this.comment.style.width=_this.width+"px";
    _this.comment.innerHTML=comment; //回复显示内容
    }
    },1,_this.comment);
      }else{
       _this.hidden();
      }
    }
    this.hidden=function(){
     var _this=this;
     var flag=1;
     var hiddenTimer=setInterval(function(){
     if(flag==1){
     _this.comment.style.height=parseInt(_this.comment.style.height)-10+"px";
     }else{    _this.comment.style.width=parseInt(_this.comment.style.width)-15+"px";
     _this.comment.style.left=parseInt(_this.comment.style.left)+5+"px";
     }
     if(flag==1 && parseInt(_this.comment.style.height)<10){
     flag=-flag;
     }
       if(parseInt(_this.comment.style.width)<20){
        clearInterval(hiddenTimer);
        _this.comment.style.left="0px";
        _this.comment.style.top="0px";
        _this.comment.style.height="0px";
        _this.comment.style.width="0px";
        _this.comment.style.display="none";
        if(_this.list.style.zIndex==zindex){
        zindex--;
        };
        _this.list.style.zIndex=0;
        _this.list.className="list";
       }
      },1)
     }
     }
     window.onload=function(){
     //建立各个菜单对象
     var shower1=new Shower();
     shower1.init($id("list1"),$id("comment1"));
     var shower2=new Shower();
     shower2.init($id("list2"),$id("comment2"));
     var shower3=new Shower();
     shower3.init($id("list3"),$id("comment3"));
     }
    </script>
    希望本文所述对大家JavaScript程序设计有所帮助。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/24 21:33:28