Rumah > Artikel > hujung hadapan web > js untuk mencapai kemahiran effect_javascript kecerunan ketelusan

js untuk mencapai kemahiran effect_javascript kecerunan ketelusan

WBOYasal: 2016-05-16 16:05:061687semak imbas

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;

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

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

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>

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 klik mudah kembali ke atas kesan pelaksanaan kaedah_kemahiran javascriptArtikel seterusnya：js klik mudah kembali ke atas kesan pelaksanaan kaedah_kemahiran javascript

Artikel berkaitan

Lihat lagi