JavaScript实现图片拖曳效果

2024-05-06 16:39:34

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现图片拖曳效果的具体代码，供大家参考，具体内容如下

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：javascript将list转换成树状结构的实例

下一篇：通过button将form表单的数据提交到action层的实例