recherche

Maison  >  Article  >  interface Web  >  JS implémente la réponse aux compétences code_javascript d'effet de couche contextuelle de dégradé d'animation de clic de souris

JS implémente la réponse aux compétences code_javascript d'effet de couche contextuelle de dégradé d'animation de clic de souris

WBOY
WBOYoriginal
2016-05-16 15:08:151409parcourir

L'exemple de cet article décrit l'implémentation JS de l'effet de calque contextuel de dégradé d'animation en réponse aux clics de souris. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants : 

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

Les lecteurs intéressés par davantage de contenu lié à JavaScript peuvent consulter les sujets spéciaux sur ce site : "Résumé des techniques d'algorithme de recherche JavaScript", "Résumé des effets et techniques spéciaux d'animation JavaScript ", "Résumé des erreurs JavaScript et des techniques de débogage", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé mathématique JavaScript de l'utilisation des opérations》

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：10 sites Web d'apprentissage de l'anglais AngularJS que vous devez connaître_AngularJSArticle suivant：10 sites Web d'apprentissage de l'anglais AngularJS que vous devez connaître_AngularJS

Articles Liés

Voir plus