dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 707|回复: 1

[@] Resizeable前端面板大小缩放视频教程

[复制链接]

该用户从未签到

2970

主题

93

帖子

408

积分

会|员

Rank: 9Rank: 9Rank: 9

积分
408
发表于 2018-12-21 14:12:04 | 显示全部楼层 |阅读模式
程序人生
课程方向: 网页前端 
课程类型: 功能实现 

本站资源全部免费,回复即可查看下载地址!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
5704ad800001659006400360-240-135.jpg
课程简介:
QQ空间自定义模板可以自由调整其大小,这个课程来揭秘其中的原理,先从分析实现原理到步骤分解,再到关键代码解析,最后详细讲解每个步骤的代码实现过程。一步步带领小伙伴们实现Resizable Panel的开发。

课程须知:
本课程适合前端初学者或者自学的童鞋们,通过简单案例来掌握编程思想。您需要掌握基础的 html/css/javascript技能,您最好了解函数的编写和调用以及事件的概念。

课程能学到什么?
1、网页中鼠标位置,对象位置的获取方法
2、拖拽功能的原理和实现
3、拖拽范围的大小限定

课程目录:
第1章 Resizable简介及实现思路
本章节介绍了Resizable的实现思路,先从界面的初始化到附加拖拽事件最后再支持面板大小的更改,一步步的进行阐述。
1-1 Resizeable课程简介及原理分析 (05:13)
第2章 Resizable代码编写
本章主要的代码编写,通过从界面到功能,从一个控制元素到全部的控制元素,一步步实现了附加控制元素、为控制元素支持拖拽、改面板大小一系列的功能,最终实现了我的们的效果。其重点介绍了拖拽实现的原理,以及拖拽如何与控制元素结合来更改面板的大小。
2-1 Resizeable Panel界面样式 (04:51)
2-2 编程练习
2-3 动态添加控制条(Resizeable Panel) (02:54)
2-4 编程练习
2-5 右边控制条支持拖拽(Resizeable Panel) (07:43)
2-6 编程练习
2-7 下边和右下角控制条支持拖拽(Resizeable Panel) (02:47)
2-8 编程练习
2-9 更改面板大小(Resizeable Panel) (04:23)
2-10 编程练习
2-11 拖拽范围限定(Resizeable Panel) (03:20)
2-12 编程练习
第3章 Resizable总结
本章节对案例的整体实现思路进行了总结,并归纳了其中的关键点,最后带领大家复习了代码中的关键API和思路。
3-1 总结(Resizeable Panel) (01:07)
第4章 编程挑战
小伙伴们,根据所学知识,修改案例代码实现网格化拖拽。
4-1 综合挑战题


游客,如果您要查看本帖隐藏内容请回复

温馨提示:
1、本站所有内容均为互联网收集或网友分享或网络购买,本站不破解、不翻录任何视频!
2、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意!
3、本站资源仅供本站会员学习参考,不得传播及用于其他用途,学习完后请在24小时内自行删除.
4、本站资源质量虽均经精心审查,但也难保万无一失,若发现资源有问题影响学习请一定及时点此进行问题反馈,我们会第一时间改正!
5、若发现链接失效了请联系管理员,管理员会在2小时内修复
6、如果有任何疑问,请加客服QQ:1300822626 2小时内回复你!
回复

使用道具 举报

  • TA的每日心情
    奋斗
    23 小时前
  • 签到天数: 1107 天

    [LV.10]以坛为家III

    115

    主题

    2235

    帖子

    1万

    积分

    超凡入圣

    Rank: 10Rank: 10Rank: 10

    积分
    12037

    发表于 2023-2-17 23:19:24 | 显示全部楼层
    6666666666666666666666666666
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-5-6 23:57 , Processed in 0.090081 second(s), 35 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表