JS melaksanakan tindak balas kepada animasi klik tetikus kecerunan lapisan pop timbul kesan kemahiran code

JS melaksanakan tindak balas kepada animasi klik tetikus kecerunan lapisan pop timbul kesan kemahiran code_javascript

WBOY

Lepaskan： 2016-05-16 15:08:15

asal

1350 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan JS bagi kesan lapisan pop timbul kecerunan animasi sebagai tindak balas kepada klik tetikus. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

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

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan berkaitan JavaScript boleh menyemak topik khas di tapak ini: "Ringkasan teknik algoritma carian JavaScript", "Ringkasan kesan dan teknik khas animasi JavaScript ", "Ringkasan ralat JavaScript dan teknik penyahpepijatan", "Ringkasan struktur data JavaScript dan teknik algoritma", "Ringkasan algoritma dan teknik traversal JavaScript" dan "Ringkasan Matematik JavaScript bagi penggunaan operasi》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.