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

<!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. jsp页面的html代码显示不出来，提示Uncaught SyntaxError: Unexpected token <

    jsp页面的html代码显示不出来,提示Uncaught SyntaxError: Unexpected token < <input type="hidden" na ...

  2. PHP不借助第三个变量交换值

    总结一下: //方法一: $a = "abc"; $b= "def"; $a = $a^$b; $b = $b^$a; $a = $a^$b; //方法二: l ...

  3. 使用Mobile Device Manager Plus mdm软件进行完备的移动设备管理

    使用Mobile Device Manager Plus mdm软件进行完备的移动设备管理 什么是移动设备管理(mdm管理系统)? 移动设备管理(mdm管理系统)旨在管理企业内移动设备.管理员使用md ...

  4. Python从入门到超神之文件处理

    一.文件处理流程(python默认是utf-8编码) 打开文件函数:open(文件路径,encoding=‘utf-8’)注意:open会检索系统的编码,所以需要调整一致否则报错 例如:fi=open ...

  5. win10传奇手册CHM打开无法阅读解决

    今天在阅读传奇的帮助文档时候,突然遇到了一个问题.打开为空白. 如图所示  我这个情况打开的时候会提示 这个时候我们把 打开此文件总是询问 这个对勾 去掉 惊喜有没有. 哈哈 .有问题欢迎大家私信我!

  6. XMLHttpRequest状态码及相关事件

    1.创建一个XMLHttpRequest对象 2.对XMLHttpRequest对象进行事件的监听(定义监听事件的位置不影响 3.对XMLHttpRequest对象的状态码 状态   名称 描述 0 ...

  7. 把excel每一行中的数据输出为一个txt文档的VBA函数

    excel vba代码: Sub makeTxt() For i = 1 To 1088'从第1行到1088行(最后一行) On Error Resume Next'出现错误时继续运行脚本 Open ...

  8. python编程之变量和简单的数据结构

    一.变量 前面我们用python输出了“hello world!” 这次我们在前面加入一行,定义一个变量,然后修改第二行. 添加变量导致Python解释器需要做更多工作.处理第1行代码时,它将文本“H ...

  9. MyBatis generator配置 overwrite 文件覆盖失效

    工具:IDEA.jdk1.8.mysql 底部有解决方法! pom.xml配置 <plugins> <!--Mybatis自动代码插入--> <plugin> &l ...

  10. Codeforces Round #548 (Div. 2) F splay(新坑) + 思维

    https://codeforces.com/contest/1139/problem/F 题意 有m个人,n道菜,每道菜有\(p_i\),\(s_i\),\(b_i\),每个人有\(inc_j\), ...