JavaScript实现图片拖曳效果


Posted in Javascript onSeptember 08, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
javascript实现获取字符串hash值
May 10 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 #Javascript
javascript将list转换成树状结构的实例
Sep 08 #Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 #Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 #Javascript
js HTML5 canvas绘制图片的方法
Sep 08 #Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 #Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 #Javascript
You might like
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php绘制一个矩形的方法
2015/01/24 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Yii框架安装简明教程
2020/05/15 PHP
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
在Python中编写数据库模块的教程
2015/04/29 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
python map比for循环快在哪
2020/09/21 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
销售代表求职自荐信
2013/10/01 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
市级三好学生评语
2014/12/29 职场文书
实习计划书范文
2015/01/16 职场文书
教师年度个人总结
2015/02/11 职场文书
统计员岗位职责
2015/02/11 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android