首页 > > 网页制作 > css >

图片拖曳

2018-06-24 01:50:29来源：未知阅读 ()

<!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="随机生成">
<div id="pbox">
<div id="box">

</div>
</div>
</body>
<script>
    var btn=document.getElementById("btn");//获取按钮
    var box=document.getElementById("box");//获取box
    var pbox=document.getElementById("pbox");//获取pbox
    var arr=['#fff143','#ff7500','#a3d900','#eedeb0','#ae7000','#b35c44','#392f41','#ff461f','#44cef6','#edd1db','#003371'];//随机颜色
    //给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>