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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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
PHP5 安装方法
2006/10/09 PHP
php的ajax简单实例
2014/02/27 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
python保存文件方法小结
2018/07/27 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
美术教师岗位职责
2014/03/18 职场文书
合作投资意向书
2014/04/01 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
化工专业自荐书
2014/06/16 职场文书
项目安全员岗位职责
2015/02/15 职场文书
辅导员学期工作总结
2015/08/14 职场文书
Python机器学习之基础概述
2021/05/19 Python