原生js拖拽实现图形伸缩效果
本文实例为大家分享了js拖拽实现图形伸缩效果的具体代码，供大家参考，具体内容如下
点击矩形的四个角和四个边实现不同的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.div1{
width: 200px;
height: 200px;
background-color: #71e4ff;
position: absolute;
top: 200px;
left: 200px;
}
.t,
.b{
width: 100%;
height: 20px;
background-color:#ffa2d3;
position: absolute;
}
.t{
left: 0;
top:0;
}
.b{
left: 0;
bottom:0;
}
.r,
.l{
width: 20px;
height: 100%;
background-color:#ffa2d3;
position: absolute;
}
.r{
right: 0;
top:0;
}
.l{
left: 0;
top:0;
}
.lt,
.lb,
.rt,
.rb{
width: 20px;
height: 20px;
background-color: #93ff6b;
position: absolute;
}
.lt{
left: 0;
top:0;
}
.rt{
right: 0;
top:0;
}
.lb{
left: 0;
bottom: 0;
}
.rb{
right: 0;
bottom:0;
}
</style>
</head>
<body>
<div class="div1" id="_div1">
<div class="t"></div>
<div class="r"></div>
<div class="b"></div>
<div class="l"></div>
<div class="lt"></div>
<div class="lb"></div>
<div class="rt"></div>
<div class="tb"></div>
</div>
</body>
</html>
<script>
// 获取元素
var _div1 = document.getElementById("_div1");
var divs = _div1.children;
// 遍历每个可以拖拽的元素
for(var i = 0;i < divs.length ;i++)
{
drag(divs[i]);
}
// 封装一个拖拽函数
function drag(obj){
obj.onmousedown = function(event){
// 捕获事件
var event = event || window.event;
// 存储当前的_div1的宽高
var divW = _div1.offsetWidth;
var divH = _div1.offsetHeight;
// 获得当前_div1的offsetLeft 和 offsetTop
var divL = _div1.offsetLeft;
var divT = _div1.offsetTop;
// 存储鼠标按下时的位置
var clientx = event.clientX;
var clienty = event.clientY;
document.onmousemove = function(event){
var event = event || window.event;
if(obj.className.indexOf('t') != -1){
_div1.style.height = divH + ( clienty- event.clientY) + 'px';
_div1.style.top = divT -( clienty- event.clientY)+ 'px';
}
if(obj.className.indexOf('b') != -1){
_div1.style.height = divH + ( event.clientY -clienty ) + 'px';
}
if(obj.className.indexOf('r')!= -1){
_div1.style.width = divW + ( event.clientX - clientx) + 'px';
}
if(obj.className.indexOf('l')!= -1){
_div1.style.width = divW + ( clientx - event.clientX) + 'px';
_div1.style.left = event.clientX + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
return false;
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS实现拖拽图片效果
本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a
-
d3.js实现图形拖拽
本文实例为大家分享了d3.js图形拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽操作</title> </head> <body> <script src = "d3.js"></script&g
-
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
本文实例讲述了JS实现放大.缩小及拖拽图片的方法.分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; window.onload=function(){ divId = document.getElementById("block1"); var height1 = images1.height;//图片的高度 var width1 = images1.width;//图片的宽度 v_left=(document.body.client
-
JS HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
-
js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align: center; } .container{ display: flex; just
-
JS实现简易的图片拖拽排序实例代码
由HTML5的拖放API,实现的简易图片拖放效果. 一.HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置. 拖放API的监听事件如下: dragstart: 源对象拖拽开始: drag: 源对象拖拽的过程中: dragend: 源对象拖拽结束: dragenter: 进入过程对象区域; dragover: 在过程对象区域内移动: dragleave: 离开过程对象区域
-
javascript 网页编辑框及拖拽图片的问题
复制代码 代码如下: function keyPress(ev){ if(ev.keyCode==13){ //在光标所在处创建一个区域. var range=document.selection.createRange(); //将区域的内容设置成为换行符. range.text="\n"; //将区域的起始点向右移动一个字符的长度. range.moveStart("character", 1); //将光标移动到区域的结尾.(若为false则是移动到起始位置)
-
js实现图片放大和拖拽特效代码分享
本文实例讲述了js实现图片放大和拖拽特效代码.分享给大家供大家参考.具体如下: js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放. 运行效果图: ----------------------查看效果 源码下载----------------------- 小提示:浏览
-
js实现本地图片文件拖拽效果
如何拖拽文件到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上代码 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dropBox{ width: 300px; height:
-
JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style
-
js实现使用鼠标拖拽切换图片的方法
本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan