这个拖拽的图片不是唯一的，拿到代码自己添加一张照片就可以啦

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
body{
height: 100%;
width: 100%;
background: #0086B3;
}
#box{
width: 100px;
height: 100px;
border-radius: 100px;
background:linear-gradient(red,yellow);
position: absolute;/*定位,为下面拖拽提供css样式,必须有的*/
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
color: red;
}
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="box"><img src="aa.gif" alt=""></div>
</body>
</html>
<script>
var box = document.getElementById("box");//获取id
box.onmousedown = function(e){//鼠标按下事件
var e = e || event;//事件对象兼容
e.preventDefault ? e.preventDefault():e.returnValue = flase;
//阻止字体被选中
var disx = e.offsetX || e.layerX;//计算相对盒子水平偏移量
var disy = e.offsetY || e.offsetY;//计算相对盒子垂直偏移量
document.onmousemove = function(e){//鼠标移动事件
var e = e || event;
//边界处理
var wx = window.innerWidth - 100;//水平移动范围限制
var wy = window.innerHeight -100;//垂直移动范围限制
var x = e.pageX - disx ;//计算鼠标水平偏移量
var y = e.pageY -disy ;//计算鼠标垂直偏移量
if(x < 0){//左边界限制
x = 0;
}else if(x > wx){//右边界限制
x = wx;
}
if(y < 0){//上边界限制
y = 0;
}else if(y > wy){//下边界限制
y = wy;
}
box.style.left = x + "px";//盒子css样式赋值
box.style.top = y + "px";
box.style.transform = "scale(2)";//放大两倍
// box.style.transform = "rotate(180deg)";
// box.style.cssText = "transform : scale(2) rotate(360deg);"
box.style.transition= "1s";//时间过渡1s
}
box.onmouseup = function(){//鼠标抬起事件
document.onmousemove = null;//删除鼠标移动事件
box.style.transform = "scale(1)";//盒子大小还原
/* box.style.transition= "none"; */

}
}
</script>

好玩的原生js的简单拖拽的更多相关文章

  1. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. js插件-简单拖拽

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...

  3. js实现简单拖拽效果

    方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function ...

  4. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  5. 原生JS实现图片拖拽移动与缩放

    看一下最终效果,图片可以拖动,可以缩放 把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去left和top值,移动的时候获取位置减去初始的值就得到移动的时候的lef ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  8. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  9. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. jieba库词频统计

    一.jieba 库简介 (1) jieba 库的分词原理是利用一个中文词库,将待分词的内容与分词词库进行比对,通过图结构和动态规划方法找到最大概率的词组:除此之外,jieba 库还提供了增加自定义中文 ...

  2. 修改oracle的字符集操作方法

    cmd环境下进行以下命令行的操作--连接sqlplus / as sysdba--命令行shutdown immediate; startup mount ALTER SYSTEM ENABLE RE ...

  3. RequestMethod.Post&RequestMethod.GET

    1.GET和POST都是将数据送到服务器 2.GET通过URL请求传递用户的数据,将表单各字段名称以及内容,以成对的字符串连接,置于action所指程序的URL后:POST方法通过HTTP post ...

  4. 2019-1-24 Spark 学习 --总体架构

    2019-1-24 Spark 学习 --总体架构 新建 模板 小书匠 1548339392539.jpg 1548339357270.jpg 1548339372461.jpg 1548339345 ...

  5. python Flask框架mysql数据库配置

    我是一个没有笔记习惯的低级程序员,但是我还是喜欢编程,从小学就开始跟着玩电脑,对抓鸡,ddos,跳板刷钻开始了自己的IT 旅程,之后学习了各种语言,但是可惜都不没有达到精通,都是略懂一二,现在想把Py ...

  6. 在n个数字中求为k的和————Java

    给出N个正整数组成的数组A,求能否从中选出若干个,使他们的和为K.如果可以,输出:"YES",否则输出"NO".用Java实现 import java.util ...

  7. 树莓派RaspBerry账户初始化设定

    1 第一次安装系统进入后默认账户是pi/raspberry  root账户是默认锁定的 sudo passwd root 设置root账户密码 sudo passwd --unlock root 开启 ...

  8. PyCharm 安装教程（Windows）

    python教程 http://www.runoob.com/python3/python3-basic-syntax.html PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性, ...

  9. PHP与Excel 笔记

    一:   PHP将数据导出Excel表中(投机型) 二: PHPExcel: Github上可以下载此插件包,用法如下: 前端: //上传阅卷员Excel文件 $("#upload_memb ...

  10. java上传文件获取跟目录的办法

    在java中获得文件的路径在我们做上传文件操作时是不可避免的.web 上运行1:this.getClass().getClassLoader().getResource("/"). ...