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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
node Buffer缓存区常见操作示例
May 04 Javascript
前端深入理解Typescript泛型概念
Mar 09 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php支付宝接口用法分析
2015/01/04 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
脚本合并提升javascript性能示例
2014/02/24 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
JS二分查找算法详解
2017/11/01 Javascript
详解VUE 数组更新
2017/12/16 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
python实现清屏的方法
2015/04/30 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python字符串的常见操作实例小结
2019/04/08 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python调用Windows命令打印文件
2020/02/07 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
工程造价专业大学生职业规划范文
2014/03/09 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年社区工作总结
2014/11/18 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python