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

<!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. 服务管理之httpd

    目录 1. httpd简介 2. httpd版本 2.2 httpd-2.4新增的模块 3. httpd基础 3.1 httpd自带的工具程序 3.2 rpm包安装的httpd程序环境 3.3 web ...

  2. HTTP协议之url详解

    HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...

  3. linux下安装srilm

    1.安装相关依赖库 a.c/c++ compiler:编译器gcc 3.4.3及以上版本   b.GNU make:构建和管理工程的工具,解释Makefile里的指令,描述了整个工程所有文件的编译顺序 ...

  4. MySQL 连接出现 Authentication plugin 'caching_sha2_password' cannot be loaded

    参考帖子: https://www.cnblogs.com/zhurong/p/9898675.html cmd 需要使用管理员权限打开

  5. 安装jdk+tomcat

     linux安装高版本jdk后不起作用的解决办法 1.安装jdk1.8. 2.修改/etc/profile中的JAVA_HOME为新的jdk路径,并执行source /etc/profile. 3.执 ...

  6. VS2017 Debug断点后显示UTF8字符串

    断点后跟踪字幕文件文本,因为国内字幕一般是UTF8的,VS默认显示不出来,在变量上双击,加入 ,s8就可以了 默认 修改后 其他 ,数字  将变量拆分为数组显示, 数字是要显示多少位, 此法对cons ...

  7. Python3学习（1）——初步了解

    Python是解析性语言,Python解释器将源程序解释并执行. 基本语法 print()   --打印字符串 -直接打印 print("hello world") 结果: hel ...

  8. gensim自然语言处理

    参考代码 ChineseClean_demo1.py: # -*- coding:utf-8 -*- import xlrd import xlwt ''' python3.4 ''' # file ...

  9. 2019浙大校赛--G--Postman（简单思维题）

    一个思维水题 题目大意为,一个邮递员要投递N封信,一次从邮局来回只能投递K封.求最短的投递总距离.需注意,最后一次投递后无需返回邮局. 本题思路要点: 1.最后一次投递无需返回邮局,故最后一次投递所行 ...

  10. 下载、安装JDK并配置JDK的环境变量

    概念简介: JDK:(Java Development Kit)Java语言的软件开发工具包,它包含了Java程序的开发工具和Java程序的运行环境JRE: JRE:(Java Runtime Env ...