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 相关文章推荐
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
小程序实现tab标签页
Nov 16 Javascript
JavaScript实现两个数组的交集
Mar 25 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
对python中的argv和argc使用详解
2018/12/15 Python
python实现银行账户系统
2021/02/22 Python
python实现学生信息管理系统源码
2021/02/22 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
Java如何调用外部Exe程序
2015/07/04 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
大学新生军训感言
2014/02/25 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
乱世佳人观后感
2015/06/08 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
详解Python中*args和**kwargs的使用
2022/04/07 Python