JS Motion Framework partageant des exemples d'animation de la barre latérale_compétences Javascript

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 : *{ marge : 0px ; remplissage : 0 px ; } #div1{ largeur : 319 px ; hauteur : 340 px ; bordure : 1px solide #FFF ; position : absolue ; haut : 100 px ; gauche : -320px ; image d'arrière-plan : url(images/1.png); répétition d'arrière-plan : pas de répétition ; } #div1 durée{ largeur : 30 px ; hauteur : 130px ; bordure : 1px bleu uni ; position : absolue ; à droite : -23 px ; haut : 95 px ; fond : rouge ; famille de polices : "微软雅黑" ; couleur : #FFFFFF ; alignement du texte : centre ; hauteur de ligne : 40 px ; rayon de bordure : 0px 200px 200px 0px ; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')(0]; var temps = nul ; vitesse variable = 8 ; oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 clearInterval(heure); time=setInterval(function(){ If(oDiv.offsetLeft>=0){clearInterval(time);} oDiv.style.left=oDiv.offsetLeft vitesse 'px' },1); oDiv.onmouseout=function(){//Ajouter un événement de sortie de souris à l'ensemble du div à Temps=setInterval(function(){ If(oDiv.offsetLeft oDiv.style.left=oDiv.offsetLeft-speed 'px' },1); & Lt; span & gt; partager avec & lt;/span & gt;

Code optimisé :

Copier le code

Le code est le suivant : *{ marge : 0px ; remplissage : 0 px ; } #div1{ largeur : 319 px ; hauteur : 340 px ; bordure : 1px solide #FFF ; position : absolue ; haut : 100 px ; gauche : -320px ; image d'arrière-plan : url(images/1.png); répétition d'arrière-plan : pas de répétition ; } #div1 durée{ largeur : 30 px ; hauteur : 130px ; bordure : 1px bleu uni ; position : absolue ; à droite : -23 px ; haut : 95 px ; fond : rouge ; famille de polices : "微软雅黑" ; couleur : #FFFFFF ; alignement du texte : centre ; hauteur de ligne : 40 px ; rayon de bordure : 0px 200px 200px 0px ; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')(0]; var temps = nul ; var spe = 8 ; var vitesse = nul ; function move(bord){ clearInterval(heure); time=setInterval(function(){ If(oDiv.offsetLeft>bord){speed=-spe;} If(oDiv.offsetLeft==bord){clearInterval(time);} oDiv.style.left=oDiv.offsetLeft vitesse 'px' },1); Odiv.onmouseover = Function () {// Ici l'événement qui ajoute la souris à l'ensemble du div déplacer(0); oDiv.onmouseout=function(){//Ajouter un événement de sortie de souris à l'ensemble du div déplacer(-320); & Lt; span & gt; partager avec & lt;/span & gt;

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.