js untuk mencapai kesan animasi yang serupa dengan animasi dalam kemahiran jquery

js untuk mencapai kesan animasi yang serupa dengan animasi dalam kemahiran jquery_javascript

WBOY

Lepaskan： 2016-05-16 16:05:00

asal

1160 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara js boleh mencapai kesan animasi yang serupa dengan animasi dalam jquery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Contoh ini boleh mencapai kesan menggerakkan tetikus ke atas, mula-mula menukar lebar, kemudian menukar ketinggian, dan akhirnya menukar ketelusan, menggerakkan tetikus keluar, dan kemudian menukar kembali semula.

Mata 1:

startrun(obj,attr,target,fn)
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}

Salin selepas log masuk

Seperti di atas, fungsi juga boleh digunakan sebagai parameter, yang boleh mencapai kesan melaksanakan tindakan dahulu dan kemudian melaksanakan tindakan.

Mata 2:

if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}

Salin selepas log masuk

Apabila pergerakan mencapai titik sasaran, matikan pemasa, dan kemudian anda boleh melaksanakan fungsi baharu.

Akhir sekali, tambah kod:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;filter:alpha(opacity=30); opacity:0.3;}
-->
</style>
<script>
<!--
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
window.onload = function(){
 var box = document.getElementById("box");
 box.onmouseover = function(){
  startrun(box,"width",200,function(){
   startrun(box,"height",200,function(){
    startrun(box,"opacity","100")
   });
  });
 }
 box.onmouseout = function(){
  startrun(box,"height",100,function(){
   startrun(box,"width",100,function(){
    startrun(box,"opacity","30");
   });
  });
 }
}
function startrun(obj,attr,target,fn){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var cur = 0;
  if(attr == "opacity"){
   cur = Math.round(parseFloat(getstyle(obj,attr))*100);
  }else{
   cur = parseInt(getstyle(obj,attr));
  }
  var speed = (target-cur)/8;
  speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
  
  if(cur == target){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }else{
   if(attr == "opacity"){
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style.opacity = (cur+speed)/100;
   }else{
   obj.style[attr] = cur + speed + "px";
   }
  }
 },30)
}
//-->
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.