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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1191 次日期：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">

<head>

<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>

<div class="list" id="list1">1

</div>

<div class="list" id="list2">2

</div>

<div class="list" id="list3">3

</div>

</body>

</html>

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

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

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

手机网站地址：JS实现响应鼠标点击动画渐变弹出层效果代码

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！