足球游戏_中国足彩网¥体育资讯$

JS实现响应鼠标点击动画渐变弹出层效果代码
来源:易贤网 阅读:1182 次 日期:2016-07-16 11:55:50
温馨提示:易贤网小编为您整理了“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=gbk" />

<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程序设计有所帮助。

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标