js untuk mencapai kemahiran effect_javascript kecerunan ketelusan-tutorial js-php.cn

js untuk mencapai kemahiran effect_javascript kecerunan ketelusan

WBOY

Lepaskan： 2016-05-16 16:05:06

asal

1689 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara mencapai kesan kecerunan ketelusan dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Di sini anda boleh menyedari bahawa ketelusan elemen ialah 30 pada permulaan Apabila tetikus digerakkan, ketelusan perlahan-lahan meningkat dan berhenti apabila ketelusan mencapai 100. Apabila tetikus bergerak keluar, ketelusan perlahan-lahan berkurangan kepada 30.

Mata 1: Oleh kerana nilai ketelusan tidak boleh diperoleh dan ditukar secara langsung, anda boleh menetapkan nilai ketelusan kepada pembolehubah, biarkan pembolehubah berubah dan akhirnya memberikan nilai pembolehubah kepada nilai ketelusan elemen.

var alpha=30;

Salin selepas log masuk

Mata 2: Nilaikan nilai sasaran dan nilai ketelusan semasa untuk menentukan sama ada kelajuan positif atau kelajuan negatif.

if(target > alpha){
speed = 2;
}else{
speed = -2;
}

Salin selepas log masuk

Perkara 3: Jika nilai ketelusan mencapai nilai sasaran, matikan pemasa, jika tidak nilai ketelusan akan terus berubah. Akhir sekali, nilai diberikan kepada elemen Kerana ketelusan mempunyai isu keserasian, dua kaedah penulisan diperlukan.

if(alpha == target){
clearInterval(timer);
}
else{
alpha = alpha + speed;
run.style.filter = 'alpha(opacity='+alpha+')';
run.style.opacity = alpha/100;
document.title = alpha;
}

Salin selepas log masuk

Akhir sekali, tambah kod:

<!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>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var speed = 1;
 var timer = null;
 var alpha=30;
 run.onmouseover = function(){
  startrun(100);
 }
 run.onmouseout = function(){
  startrun(30);
 }
 function startrun(target){
  clearInterval(timer);
  timer = setInterval(function(){
   if(target > alpha){
    speed = 2;
   }else{
    speed = -2;
   }
   if(alpha == target){
    clearInterval(timer);
   }
   else{
    alpha = alpha + speed;
    run.style.filter = 'alpha(opacity='+alpha+')';
    run.style.opacity = alpha/100;
    document.title = alpha;
   }
  },30)
 }
}
</script>
</head>
<body>
<div id="run"></div>
</body>
</html>

Salin selepas log masuk

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