JS实现响应鼠标点击动画渐变弹出层效果代码

2019-11-20 10:20:50

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 class="" id="show">0</div><div class="list" id="list1">1 <div class="comment" id="comment1">武林网<br/></div><div class="list" id="list2">2 <div class="comment" id="comment2">新浪搜狐</div></div><div class="list" id="list3">3 <div class="comment" 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相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：JS实现点击登录弹出窗口同时背景色渐变动画效果

下一篇：JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)