js untuk mencapai pelbagai kesan kecerunan pada kemahiran page

js untuk mencapai pelbagai kesan kecerunan pada kemahiran page_javascript yang sama

WBOY

Lepaskan： 2016-05-16 16:04:53

asal

1151 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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