溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用JavaScript怎么實現拖拽圖形伸縮效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
<!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>上述就是小編為大家分享的使用JavaScript怎么實現拖拽圖形伸縮效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
