Wenn wir während des Entwicklungsprozesses einen Ein- und Ausblendeffekt erzielen möchten, können wir die Methode fadeTo() von jQuery vollständig verwenden. Unser Ziel besteht jedoch nicht nur darin, es zu nutzen, sondern auch darin, die zugrunde liegende Logik des Programms zu verstehen. In diesem Artikel wird hauptsächlich natives Javascript verwendet, um den Ein- und Ausblendeffekt zu erzielen.
Der Aufbau des Frameworks ist grundsätzlich nicht schwierig.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度函数的封装</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
opacity: .3;
filter: alpha(opacity:30);
}
</style>
</head>
<body>
<div id="box"></div>
<script src="toumingdu.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Die Hauptschwierigkeit beim Schreiben des Javascript-Teils ist die Funktion changeOpacity().
window.onload = function (){
var box = document.getElementById('box');
box.onmouseover = function (){
changeOpacity(this,100);
}
box.onmouseout = function (){
changeOpacity(this,30);
}
}
/**
*
* @param {Object} box 要变化透明度的元素
* @param {Object} target 透明度的目标值（100为最高）
*/
function changeOpacity(box,target){
var opa;
var speed;
if(box.currentStyle){
//判断浏览器类型，此类型为IE浏览器，即使IE不支持opacity属性，但是仍然可以获取值
opa = box.currentStyle['opacity']*100;
}
else{//其他浏览器
opa = getComputedStyle(box,false)['opacity']*100;
}
//透明度每次变化的值（步长），根据目标值和当前值的差来决定步长的正负
target-opa>=0?speed=1:speed=-1;
clearInterval(box.timer);
box.timer = setInterval(function (){
//目标值和当前值差值的绝对值大于等于步长的绝对值，设置透明度为当前值加步长
if(Math.abs(target-opa)>=Math.abs(speed)){
box.style.opacity=(opa+speed)/100;
box.style.filter='alpha(opacity:'+(opa+speed)+')';
}
//目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位，
//设置透明度直接为目标值，同时清除定时器
else{
box.style.opacity=target/100;
box.style.filter='alpha(opacity:'+target+')';
clearInterval(box.timer);
}
//直接对透明度参数进行加步长的运算，避免每次都要获取当前透明度
opa=opa+speed;
},30);
}
Das Prinzip dieser Transparenzfunktion ist im Allgemeinen das gleiche wie das der Bewegungsfunktion. In drei Schritten zusammengefasst:
1. Ermitteln Sie den aktuellen Wert und bestimmen Sie die Schrittgröße basierend auf dem Zielwert und dem aktuellen Wert.
2. Der Änderungsprozess, wobei jedes Mal ein Wert geändert wird (die Schrittlängen der Verlaufsanimation). und Transparenz sind unterschiedliche Werte), während die einheitliche Geschwindigkeitsanimation und die Transparenzschrittgröße feste Werte sind);
Die größte Schwierigkeit beim Verständnis des Prinzips dürfte darin bestehen, die aktuelle Transparenz zu erlangen (Zuordnung ist relativ einfach). Um den Transparenzwert zu erhalten, müssen wir zwei Situationen berücksichtigen:
2. Andere Browser unterstützen das Opazitätsattribut, sodass sich unser Vorgang beim Schreiben und Lesen nur auf die Opazität konzentrieren kann.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
