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

<!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. 在IDEA下导入Maven项目之后 Dependencies报红线

    在IDEA中导入新的Maven项目之后,许多jar包出现波浪线的情况,在网上搜了很多办法都不管,什么直接删掉pom文件中的依赖,保存之后,刷新再ctrl+z 撤回 问题就消失了, 还有的说,你可以直接 ...

  2. cookie设置和清除，解决跨目录读取不到cookie值

    cookies.setCookie("UserType", result.UserType, null, '/'); cookies.deleteCookie("User ...

  3. ES6 Template Strings(转)

    转自:https://developers.google.com/web/updates/2015/01/ES6-Template-Strings Strings in JavaScript have ...

  4. hibernate中怎样配置两个联合属性为唯一约束（非联合主键）

    Annotation中配置: @Table元素包括了一个schema和一个catalog属性,如果需要可以指定相应的值. 结合使用@UniqueConstraint注解可以定义表的唯一约束(uniqu ...

  5. vue-cli 第二章 （常见问题修正）

    一.编译打包多出 *.map 文件处理   当执行 npm run build 后根目录下会编译出一个 dist 的文件夹,如下:     其中 css 和 js  文件夹下会多出一些 *.map 的 ...

  6. python中3个连续的单引号是什么意思?''' ... ''' 这样的引号是什么意思?

  7. MFC改变坐标系

    1.在MainFrm中的PreCreateWindow中设置默认窗口大小 BOOL CMainFrame::PreCreateWindow(CREATESTRUCT& cs) { if( !C ...

  8. ADO SQL手写分页

    //实现层 ---------------------------------------------------------分割线---------------------------------- ...

  9. Xamarin常见问题

    1. Could not locate Java 6 or 7 SDK. (Download from http://www.oracle.com/technetwork/java/javase/do ...

  10. python视频地址和链接

    算法 链接:http://pan.baidu.com/s/1nvHmcZJ 密码:fwjg常用库 链接:http://pan.baidu.com/s/1o8uPvPg 密码:yp3w进阶-高级代码 链 ...