Cet article présente principalement l'exemple d'implémentation de l'animation de défilement fluide primée sur le terminal mobile Html5. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.
Cet article présente l'exemple de mise en œuvre de l'animation de défilement fluide primée sur le terminal mobile Html5. J'aimerais le partager avec vous. Les détails sont les suivants :
Analyse des exigences<.>
Haha, l'image dynamique ci-dessus est vraiment géniale. Cela devient clair.
squelette HTML
est en fait très simple. Le
<p class="roll" id="roll">
<ul>
<li>第一个结构</li>
<li>第二个结构</li>
<li>第三个结构</li>
<li>第四个结构</li>
<li>第五个结构</li>
<li>第六个结构</li>
<li>第七个结构</li>
<li>第八个结构</li>
</ul>
</p>Style CSS de base
Implémentez d'abord le style CSS de base*{
margin:0;
padding:0;
}
.roll{
margin: 100px auto;
width: 200px;
height: 40px;
overflow:hidden;
border: 1px solid aquamarine;
}
.roll ul{
list-style: none;
}
.roll li{
line-height:20px;
font-size:14px;
text-align:center;
}
Idées d'implémentation
Utilisation de l'animation animate de jquery.
Méthode animate()$(selector).animate(styles,speed,easing,callback)
styles : paramètres requis, style CSS qui doit générer une animation (utiliser la dénomination de cas de chameau )
speed : Spécifie la vitesse d'animation
@number:1000(ms)
@string:"slow","normal","fast"
easing : vitesse d'animation (swing, linéaire)
callback : La fonction de rappel après l'exécution de la fonction
$(document).ready(function(){
setInterval(function(){ // 添加定时器，每1.5s进行转换
$("#roll").find("ul:first").animate({
marginTop:"-40px" //每次移动的距离
},500,function(){ // 动画运动的时间
//$(this)指的是ul对象，
//ul复位之后把第一个元素和第二个元素插入
//到ul的最后一个元素的位置
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
$(this).find("li:first").appendTo(this);
});
},1500)
});
2. Animation d'animation utilisant css3
Grâce aux images clés en CSS3, vous pouvez obtenir l'effet de sauter des étapes. Jetons d’abord un bref aperçu de l’idée.Préliminaire
1. S'il s'agit d'une récompense écrite en dur, vous devez alors copier la précédente à l'arrière. S'il défile un par un, puis copiez le premier. Un, s'il y a deux parchemins, copiez le premier et le deuxième.<p class="roll" id="roll">
<ul>
<li>第一个结构</li>
<li>第二个结构</li>
<li>第三个结构</li>
<li>第四个结构</li>
<li>第五个结构</li>
<li>第六个结构</li>
<li>第七个结构</li>
<li>第八个结构</li>
<li>第一个结构</li>
<li>第二个结构</li>
</ul>
</p>.
/*这里不做兼容性处理*/
.roll ul{
list-style: none;
animation: ani 5s linear infinite; /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{
0%{
margin-top: 0;
}
12.5%{
margin-top: 0;
}
25%{
margin-top: -40px;
}
37.5%{
margin-top: -40px;
}
50%{
margin-top: -80px;
}
62.5%{
margin-top: -80px;
}
75%{
margin-top: -120px;
}
87.5%{
margin-top: -120px;
}
100%{
margin-top: -160px; /*最后是一个，这样可以打断动画*/
}
}Avancé
Si le nombre est incertain, un calcul dynamique est nécessaire pour ajouter dynamiquement des @keyframes. car vous pouvez calculer clairement l'intervalle et le mouvement, juste la distance. 1. Obtenez d'abord la durée de2. Puis calculez le pourcentage d'intervalle, n'oubliez pas d'utiliser le nombre de secondes × 2
3. épelez @keyframes avec une chaîne, 0~length, y compris la longueur, car il y en a un de plus, les nombres pairs et les nombres impairs sont séparés.
4. Clonez le premier et le deuxième dans