综合挑战题，可调大小面板实现（Resizeable Panel）教程-慕课网

第1章 Resizable简介及实现思路
视频：1-1 Resizeable课程简介及原理分析(05:13)

第3章 Resizable总结
视频：3-1 总结(Resizeable Panel)(01:07)

第4章编程挑战
编程：4-1 综合挑战题

综合挑战题

小伙伴们，根据所学知识，修案例实现网格化拖拽，拖拽的时候以５０个像素为网格，没有超过５０个像素面板大小不变．超过５０个像素才变动。

任务

一、重新计算网格化（5０像素）后的面板宽度和高度

提示：
  可以使用取余运算符，获得x%50的余数，再用x减去它。

注意：右下角的控制元素和右边、底边的宽高不一样．

?不会了怎么办: 右侧有实战题的完整代码下载

index.html

1
<!DOCTYPE html
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
资料下载
代码

全部精华我要发布

var grid = 50;

            var grid_w = to_x + ( m_type == 'rb' ? 20:10 ) ;
	    		grid_w = grid_w-grid_w%grid;

	    	var grid_h = to_y + ( m_type == 'rb' ? 20:10 ) ;
	    		grid_h = grid_h-grid_h%grid;

+ 我来回答回答最高可+2积分

1 回答 1665 浏览

2022-06-03

var grid_w = to_x + ( m_type == 'rb' ? 20:10 ) ;
grid_w = grid_w-grid_w%grid;
没有深入理解这个是什么意思啊老师

最赞回答 / 野山椒鸡杂

第一行：我们在开始算to_x时加了一个10或者20,也就是控制条的宽度，这里用三目运算为了分别横向移动加10，斜着移动加20；第二行：你不能理解就带入一个数，比如： 1.第一行中的grid_w = 495；那么新的（第二行）grid_w = 495 - 45（495除50余数是45）=450; 2.第一行中的grid_w = 355；那么新的（第二行）grid_w = 355 - 5（355除50余数是5）=350;由上面可见新的（第二行）grid_w值都是一个能被50整除的数，也就实现了栅...

1 回答 1036 浏览

2017-11-23

看着综合代码练习了下

+ 我来回答回答最高可+2积分

2 回答 1039 浏览

2022-07-16

防不住猛托猛拽怎么办。。。拖住猛一动，事件mouseup就没反应了

+ 我来回答回答最高可+2积分

3 回答 1331 浏览

2022-07-20

全部我要发布

最热最新

只看我的

综合实战题源码立即下载

4-1 综合挑战题