Heim > Artikel > Web-Frontend > Implementierungsfall von JavaScript-kompatiblen IE6-Falt- und Entfaltungseffekten
Implementierungsfall von JavaScript-kompatiblen IE6-Falt- und Entfaltungseffekten
- 黄舟Original
- 2017-09-22 09:42:341520Durchsuche
In diesem Artikel wird hauptsächlich JavaScript zum Implementieren von IE6-kompatiblen Falt- und Entfaltungseffekten vorgestellt. Er analysiert die JavaScript-Ereignisreaktion und die Implementierungstechniken für dynamische Operationen für Seitenelementattribute anhand konkreter Beispiele.
Das Beispiel in diesem Artikel beschreibt, wie JavaScript die Falt- und Entfaltungseffekte implementiert, die mit IE6 kompatibel sind. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Es ist nicht schwierig, den Falteffekt zu reduzieren, aber Sie sollten innerHTML nicht verwenden, um zu beurteilen, ob p die Höhe überschreitet. Geben Sie beim Reduzieren innerHTML ein von allen p in eine Variable Dann wird der Inhalt einer Variablen abgefangen und in p eingefügt. Im Folgenden wird eine Methode bereitgestellt, um anhand der inhärenten Höhe von p selbst zu bestimmen, ob p zu hoch ist. Wenn es zu hoch ist, wird ein Faltknopf bereitgestellt.
Die Höhe von p wird anhand von document.getElementById("p's id").offsetHeight beurteilt. Auch wenn der Inhalt von p über das Backend ausgegeben wird, gilt document.getElementById(. "p's id").offsetHeight kann auch die endgültige Höhe von p abrufen, beispielsweise mit dem folgenden Code:
<!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>p折叠效果</title>
</head>
<body>
<p id="fold" style="border:1px #000 solid;height:100px;overflow:hidden">
<?php
echo "<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>";
?>
</p>
</body>
</html>
<script>
alert(document.getElementById("fold").offsetHeight);
</script>Das laufende Ergebnis lautet wie folgt:
Dann kann ich ein Problem basierend auf der Höhe von p erstellen. Machen Sie den folgenden Effekt:
Das HTML-Layout ist wie folgt: Verwenden Sie ein p mit der ID „fold“, um den Inhalt zu falten, den Sie reduzieren oder erweitern möchten. Fügen Sie anschließend eine Schaltfläche mit einer Breite von 100 % in das p mit der ID „fold“ ein und legen Sie eine Schaltfläche mit der ID „more_btn“ fest, da das Skript beim Laden der Webseite beginnt, die Höhe des p mit der zu beurteilen ID von Fold, wenn die ID ist. Die Höhe von Folds p ist zu klein, sodass die Schaltfläche mit der ID more_btn nicht angezeigt werden muss. Fügen Sie gleichzeitig den Inhalt p und die Schaltfläche in ein p ein.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>p折叠效果</title>
</head>
<body>
<p style="border:1px #000 solid;">
<p id="fold">
<p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
<p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
</p>
<button id="more_btn" style="width:100%" onclick="showmore(this)">查看更多</button>
</p>
</body>
</html>Der Schlüssel ist das nächste Webseitenskript, das in zwei Teile unterteilt ist. Ein Teil ist der Webseitenladeteil, der verwendet wird, um zu handhaben, ob die angezeigt wird oder nicht, und ob das p gefaltet ist. Ein weiterer Teil ist das Button-Click-Event Showmore.
<script type="text/javascript">
var p_height=document.getElementById("fold").offsetHeight;
var fold_flag=0;//用于标志现在的p是展开还是折叠，初始为0，以为折叠中
if(p_height<100){//根据p的高度是否少于100px，判断是否要隐藏按钮
document.getElementById("more_btn").style.display="none";
}
else{//将p的高度强制定为100px，同时超出部分隐藏
document.getElementById("fold").style.overflow="hidden";
document.getElementById("fold").style.height="100px";
}
//id为more_btn的按钮的点击事件，按钮被点击的时候，将自己传到这个事件中，形式参数为obj
function showmore(obj){
if (fold_flag == 0) {//展开的话，就是让p的高度根据其内容自适应，同时显示所有内容
document.getElementById("fold").style.overflow = "";
document.getElementById("fold").style.height = "";
obj.innerHTML="收起"//按钮的文字改变
fold_flag=1;//折叠标志为1，意味现在为打开状态
}
else{//收起就是回到原来的状态。
document.getElementById("fold").style.overflow="hidden";
document.getElementById("fold").style.height="100px";
obj.innerHTML="查看更多"
fold_flag=0;
}
}
</script>Das obige ist der detaillierte Inhalt vonImplementierungsfall von JavaScript-kompatiblen IE6-Falt- und Entfaltungseffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!