cari

Rumah  >  Artikel  >  hujung hadapan web  >  js untuk mencapai kesan animasi yang serupa dengan animasi dalam kemahiran jquery_javascript

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

WBOY
WBOYasal
2016-05-16 16:05:001161semak imbas

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")
});
});
}

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();
}
}

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk mencapai kemahiran exchange motion effect_javascriptArtikel seterusnya：js untuk mencapai kemahiran exchange motion effect_javascript

Artikel berkaitan

Lihat lagi