Affichage du code JavaScript pour implémenter l'effet de glissement d'image-js tutoriel-php.cn

Affichage du code JavaScript pour implémenter l'effet de glissement d'image

巴扎黑

Libérer： 2017-09-09 10:04:46

original

1499 Les gens l'ont consulté

Cet article présente principalement JavaScript pour réaliser l'effet de glissement d'image en détail, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article partage avec vous le js pour réaliser le déplacement d'image. effet. Le code spécifique est pour votre référence. Le contenu spécifique est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #pbox{
   width: 100%;
   height:100%;
  }
  #box{
   width: 200px;
   height: 200px;
   background:red;
   position: absolute;
  }
 </style>
</head>
<body>
<input type="button" id="btn" value="随机生成">
<p id="pbox">
<p id="box">

</p>
</p>
</body>
<script>
 var btn=document.getElementById("btn");//获取按钮
 var box=document.getElementById("box");//获取box
 var pbox=document.getElementById("pbox");//获取pbox
 var arr=[&#39;#fff143&#39;,&#39;#ff7500&#39;,&#39;#a3d900&#39;,&#39;#eedeb0&#39;,&#39;#ae7000&#39;,&#39;#b35c44&#39;,&#39;#392f41&#39;,&#39;#ff461f&#39;,&#39;#44cef6&#39;,&#39;#edd1db&#39;,&#39;#003371&#39;];//随机颜色
 //给btn注册点击事件ain
 btn.onclick=function(){
   pbox.innerHTML="";//清空pbo
  for(var i=0;i<=10;i++){
   var newTip =box.cloneNode(true);
   pbox.appendChild(newTip);
   var left=parseInt(Math.random()*(900-100+1) + 100);//随机生成左边距
   var top=parseInt(Math.random()*(500-100+1) + 100);//随机生成上边距
   var bg=Math.floor((Math.random()*arr.length));//生成数组随机数获得随机数组下标
   box.style.background=arr[bg];//设置颜色
   box.style.top=top+"px";//设置上边距
   box.style.left=left+"px";//设置左边距

  }
  var c=pbox.children;

  for(var i=0;i< c.length;i++){
   c[i].onmousedown=function (e) {
//     alert(this.offsetLeft);
    var spacex=e.pageX-this.offsetLeft;
    var spacey=e.pageY-this.offsetTop;
    this.onmousemove=function (e) {
     this.style.left=e.pageX-spacex+"px";
     this.style.top=e.pageY-spacey+"px";
    }
   };
   c[i].onmouseup=function () {
    this.onmousemove=null;
   }
  }
 }
</script>
</html>

Copier après la connexion

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!