cari

Rumah >hujung hadapan web >tutorial js >js untuk mencapai pelbagai kesan kecerunan pada kemahiran page_javascript yang sama

js untuk mencapai pelbagai kesan kecerunan pada kemahiran page_javascript yang sama

WBOY
WBOYasal
2016-05-16 16:04:531148semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan berbilang kesan kecerunan pada halaman yang sama menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Di sini anda boleh mencapai kesan mana-mana satu daripada 5 elemen Apabila tetikus dialihkan ke atas, ketelusan meningkat secara beransur-ansur, dan apabila tetikus dialihkan keluar, ketelusan beransur-ansur berkurangan.

Mata 1: 

var speed = 0;
if(target>obj.alpha){
speed = 5;
}else{
speed = -5;
}

Tentukan sama ada kelajuan positif atau negatif berdasarkan perbandingan antara nilai sasaran dan nilai semasa.

Mata 2: 

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].alpha = 30;
runs_li[i].onmouseover = function(){
startrun(this,100);
}
runs_li[i].onmouseout = function(){
startrun(this,30);
}
}

Tambahkan nilai ketelusannya sendiri pada setiap elemen dan pisahkan perubahan ketelusannya.

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,ul,li{margin:0; padding:0;}
#runs{width:300px; margin:10px auto;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
float:left; margin:10px; display:inline;
filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0; 
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].alpha = 30;
 runs_li[i].onmouseover = function(){
  startrun(this,100);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,30);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = 0;
 if(target>obj.alpha){
  speed = 5;
 }else{
  speed = -5;
 }
 
 if(obj.alpha == target){
  clearInterval(obj.timer);
 }else{
  obj.alpha = obj.alpha + speed;
  obj.style.filter = "alpha(opacity="+obj.alpha+")";
  obj.style.opacity = obj.alpha/100;
 }
 
 },30)
}
</script>
</head>
<body>
<ul id="runs">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
</ul>
</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 effect_javascript rating bintangArtikel seterusnya：js untuk mencapai kemahiran effect_javascript rating bintang

Artikel berkaitan

Lihat lagi