L'exemple de cet article décrit la méthode d'implémentation de partage d'animation de la barre latérale dans le framework JS motion. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante : Copier le code Le code est le suivant : <br> *{ <br> marge : 0px ; <br> remplissage : 0 px ; <br> } <br> #div1{ <br> largeur : 319 px ; <br> hauteur : 340 px ; <br> bordure : 1px solide #FFF ; <br> position : absolue ; <br> haut : 100 px ; <br> gauche : -320px ; <br> image d'arrière-plan : url(images/1.png); <br> répétition d'arrière-plan : pas de répétition ; <br> } <br> #div1 durée{ <br> largeur : 30 px ; <br> hauteur : 130px ; <br> bordure : 1px bleu uni ; <br> position : absolue ; <br> à droite : -23 px ; <br> haut : 95 px ; <br> fond : rouge ; <br> famille de polices : "微软雅黑" ; <br> couleur : #FFFFFF ; <br> alignement du texte : centre ; <br> hauteur de ligne : 40 px ; <br> rayon de bordure : 0px 200px 200px 0px ; <br> } <br> <br> window.onload=function(){ <br> var oDiv=document.getElementById("div1"); <br> var oSpan=oDiv.getElementsByTagName('span')(0]; <br> var temps = nul ; <br> vitesse variable = 8 ; <br> oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 <br> clearInterval(heure); <br> time=setInterval(function(){ <br>If(oDiv.offsetLeft>=0){clearInterval(time);} <br> oDiv.style.left=oDiv.offsetLeft vitesse 'px' <br> },1); oDiv.onmouseout=function(){//Ajouter un événement de sortie de souris à l'ensemble du div<br> à Temps=setInterval(function(){ <br> If(oDiv.offsetLeft<=-320){clearInterval(time);} <br /> oDiv.style.left=oDiv.offsetLeft-speed 'px' <br /> },1); </tête> <corps> & Lt; span & gt; partager avec & lt;/span & gt; </corps> </html><br><br> Code optimisé :<br> <br><br><br><br>Copier le code<br><br><br> Le code est le suivant :<br><div class="codebody" id="code71160"><!DOCTYPE html> <br> <html> <br> <tête> <br> <meta charset="utf-8"> <br> <titre></titre> <br> <style type="text/css"> <br> *{ <br> marge : 0px ; <br> remplissage : 0 px ; <br> } <br> #div1{ <br> largeur : 319 px ; <br> hauteur : 340 px ; <br> bordure : 1px solide #FFF ; <br> position : absolue ; <br> haut : 100 px ; <br> gauche : -320px ; <br> image d'arrière-plan : url(images/1.png); <br> répétition d'arrière-plan : pas de répétition ; <br> } <br> #div1 durée{ <br> largeur : 30 px ; <br> hauteur : 130px ; <br> bordure : 1px bleu uni ; <br> position : absolue ; <br> à droite : -23 px ; <br> haut : 95 px ; <br> fond : rouge ; <br> famille de polices : "微软雅黑" ; <br> couleur : #FFFFFF ; <br> alignement du texte : centre ; <br> hauteur de ligne : 40 px ; <br> rayon de bordure : 0px 200px 200px 0px ; <br> } <br> </style> <br> <script type="text/javascript"> <br> window.onload=function(){ <br> var oDiv=document.getElementById("div1"); <br> var oSpan=oDiv.getElementsByTagName('span')(0]; <br> var temps = nul ; <br> var spe = 8 ; <br> var vitesse = nul ; <br> function move(bord){ <br> clearInterval(heure); <br> time=setInterval(function(){ <br>If(oDiv.offsetLeft>bord){speed=-spe;} <br> If(oDiv.offsetLeft==bord){clearInterval(time);} <br> oDiv.style.left=oDiv.offsetLeft vitesse 'px' <br> },1); Odiv.onmouseover = Function () {// Ici l'événement qui ajoute la souris à l'ensemble du div <br> déplacer(0); <br> oDiv.onmouseout=function(){//Ajouter un événement de sortie de souris à l'ensemble du div<br> déplacer(-320); <br> </tête> <corps> & Lt; span & gt; partager avec & lt;/span & gt; </corps> </html><br><br> <br>J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun. <br> </div> </div>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
