Effet:
Idée:
Utilisez le cadre de mouvement flottant multifonctionnel pour obtenir l'effet Weibo. Tout d'abord, ajoutez les attributs de la zone de texte au li nouvellement créé, puis ajoutez le li au ul, puis utilisez le cadre de mouvement flottant pour afficher dynamiquement les données.
Code:
Copiez le code comme suit :
<head runat="serveur">
<titre></titre>
<style type="text/css">
*
{
marge : 0 ;
remplissage : 0 ;
}
#ul1
{
largeur : 300 px ;
hauteur : 300px ;
bordure : 1px noir uni ;
marge : 10px automatique ;
débordement : caché ;
}
#ul1li
{
style de liste : aucun ;
remplissage : 4 px ;
bordure inférieure : 1px #999 en pointillé ;
débordement : caché ;
opacité : 0 ;
}
</style>
<script type="text/javascript">
window.onload = fonction () {
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick = fonction () {
var cLi = document.createElement('li');
cLi.innerHTML = txt.value; //Ajouter des données à li
txt.value = '';
if (oUl.children.length > 0) { //Déterminez s'il existe déjà un li, si c'est le cas, insérez-le, sinon, créez-en un nouveau
oUl.insertBefore(cLi, oUl.children[0]);
} autre {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight; //Obtenir la hauteur de li
cLi.style.hauteur = '0';
move(cLi, { height: iHeight }, function () { //Utilisez ensuite le mouvement flottant pour afficher les données
move(cLi, { opacité : 100 });
});
}
}
//------------------------------------------------ ----------------------------------
//Obtenir le style non-interligne
fonction getStyle(ojb, nom) {
si (ojb.currentStyle) {
return ojb.currentStyle[nom];
}
autre {
return getComputedStyle(ojb, false)[nom];
}
}
//Application de la mise en mémoire tampon du mouvement json
//json{attr,finsh}
//json{largeur :200,hauteur :200}
function move(obj, json, fnName) { //obj est l'objet, Json est l'attribut de l'objet, fnName est la fonction
clearInterval(obj.timer); //Ferme le minuteur précédent
obj.timer = setInterval(fonction () {
var timeStop = true; //Enregistre si tous les attributs ont été exécutés
for (var attr in json) { //Parcourir les données en json
var oGetStyle = 0;
if (attr == 'opacity') { //Juge la transparence
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100 //La transparence est arrondie, puis attribuée après conversion
}
autre {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5 //Trouver la vitesse
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
si (oGetStyle != json[attr])
timeStop = faux ;
if (attr == 'opacité') { //Transparence
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')' //Attribuer une valeur à la transparence
obj.style.opacity = (oGetStyle + vitesse) / 100 ;
}
autre {
obj.style[attr] = oGetStyle + vitesse + 'px' //Déplacer le div
}
}
if (timeStop) { //Si toutes les propriétés ont été exécutées, fermez le timer
clearInterval(obj.timer);
if (fnName) { //Fonction à exécuter lorsque le minuteur est éteint
fnName();
}
}
}, 30)
}
//------------------------------------------------ ----------------------------------
</script>
</tête>
<corps>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="Publish" />
<ul id="ul1">
<li style="affichage : aucun;"></li>
</ul>
</corps>