Maison > Article > interface Web > Comment implémenter une animation glisser-déposer en HTML

Comment implémenter une animation glisser-déposer en HTML

php中世界最好的语言original: 2018-05-14 11:19:382560parcourir

Nous savons qu'il existe de nombreuses façons d'utiliser HTML pour implémenter une animation. Cette fois, je vais vous apprendre à utiliser JS pour réaliser une animation glisser-déposer en HTML. cas ensemble.

<!DOCTYPE">
<html">
<head>
<style>
#p1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var oDiv=null;
var disX=0;
var disY=0;
window.onload=function ()
{
    oDiv=document.getElementById(&#39;p1&#39;);
    oDiv.onmousedown=fnDown;
};
  
function fnDown(ev)
{
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft;
    disY=oEvent.clientY-oDiv.offsetTop;
  
    document.onmousemove=fnMove;
    document.onmouseup=fnUp;
}
function fnMove(ev)
{
    var oEvent=ev||event;
    oDiv.style.left=oEvent.clientX-disX+&#39;px&#39;;
    oDiv.style.top=oEvent.clientY-disY+&#39;px&#39;;
}
  
function fnUp()
{
    document.onmousemove=null;
    document.onmouseup=null;
}
</script>
</head>
<body>
<p id="p1">
</p>
</body>
</html>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Cas du code js - calcul du jour de la semaine en fonction de la date

Que fait le JS à quoi ressemble le moteur lorsqu'il tourne ?

Comment résoudre le problème selon lequel la fenêtre contextuelle de H5 ne peut pas s'afficher à l'aide de WebView

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php html JS webview

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explications détaillées et exemples de valeurs booléennes, d'opérateurs relationnels et d'opérateurs logiques en JSArticle suivant：Explications détaillées et exemples de valeurs booléennes, d'opérateurs relationnels et d'opérateurs logiques en JS

Articles Liés

Voir plus