ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 1、创建目录结构 ![](https://img.kancloud.cn/a2/f2/a2f26e2660242debf519e2622cba7ef9_173x87.png) # 2、HTML+css ![](https://img.kancloud.cn/ef/60/ef6033c06eff1bb7e12476c409e01fcc_583x104.png) ![](https://img.kancloud.cn/c6/3e/c63e258d10841e9f2f266c07b89a447a_398x545.png) # 3、调用插件 ![](https://img.kancloud.cn/cd/e4/cde42dfbc70f3f547f71db7172e4c89d_851x349.png) 此时没有效果。因为还没有写box插件。 # 4、完成窗口的显示 ![](https://img.kancloud.cn/e4/99/e49991554efd875ec32fe2fac100637e_674x923.png) # 5、当浏览器改变时或滚动条滚动时,保持div的位置不变 首先要给body设置的宽一些、高一些,这样才会有滚动条: ![](https://img.kancloud.cn/92/39/9239c0914be172a375bab9bcfeba6ef2_640x349.png) 封装三个函数: 第一个:计算浏览器的宽高及滚动条的滚动距离: ![](https://img.kancloud.cn/8a/8d/8a8d85aae9f2d0e9de91c29e70ba4308_667x636.png) 第二个:计算真实的left和真实的top值: ![](https://img.kancloud.cn/65/b6/65b6c319367a6ebd322df98dedde8d87_764x461.png) 第三个:显示div: ![](https://img.kancloud.cn/ef/a9/efa9a556362965a91ef42a9e642edce9_662x98.png) 先调用一次这三个函数: ![](https://img.kancloud.cn/9f/b1/9fb185f76b30a2515474df617f5c9f86_682x248.png) 绑定浏览器改变大小事件、滚动条滚动事件: ![](https://img.kancloud.cn/0e/09/0e0978985a33f2b97688a7df2197733f_513x329.png)