A jquery plug-in every day-do zoom plug-in 1
Do zoom plugin 1
Some people say that jqueryui is very old and it is not worth it to develop the project, so I plan to research it myself. The goal is to understand the working principle and expand it easily.
The effect is as follows
Code part
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>就是jqueryui里面的Resizable</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
#div{
border: 1px solid lightgray;
height: 400px;
width: 600px;
margin: 20px;
}
.rel{
position: relative;
}
.resbar{
border:1px solid lightgray;
width: 15px;
height: 15px;
position: absolute;
bottom: -10px;
right: -10px;
cursor: se-resize;
}
.stopclick{
pointer-events: none;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
$(function(){
$("#div").res();
})
$.prototype.res = function(){
//前期准备
var $that = $(this);
var that = this;
$that.addClass("rel");
var $bar = $("<div class='resbar'></div>");
$bar.appendTo($that);
//声明参数
//点击时坐标
var pos1 = getbarpos();
//拖拽时鼠标的位置
var pos2 = {
l:0,t:0};
//动作
var flag = false;
$that.mousedown(function(){
flag = true;
}).mouseup(function(){
flag = false;
})
$(document).mousemove(function(e){
if(flag){
$that.addClass('stopclick')
pos2 = geteventpos(e);
//两个坐标点都知道了，然后就是变化dom宽度了
thatchange();
}else{
$that.removeClass('stopclick')
pos1 = getbarpos();
}
}).mouseup(function(){
flag=false;
})
function thatchange(){
var w = $that.width()+(pos2.l-pos1.l)/20;
var h = $that.height()+(pos2.t-pos1.t)/20;
$that.width(w)
$that.height(h)
}
function getbarpos(){
return {
l:$bar.offset().left,t:$bar.offset().top};
}
function geteventpos(e){
return {
l:e.clientX,t:e.clientY};
}
}
</script>
Idea explanation
- Simply think that this function is to add an invisible drag box to the target container, and then trigger an action on it
- Record the starting coordinate point, and then reflect the difference between the two parameters to the height and width of the container when dragging and zooming
- However, although I have made the effect, this drag change is a bit confusing. I thought the change of this parameter was one-to-one, but in fact, I dragged my container and didn’t know where it expanded, so it’s inside. The unit of the coordinate point given by the event is not px? There was still something wrong with what I wrote, and then I gave the difference in addition to a proportional value, which was barely able to test.
- But it’s still a lame implementation. I’ll continue to do it tomorrow when I’m free.
- Endless, broken sleep~