用JavaScript实现许愿墙的效果

HTML + CSS + JavaScript代码都放在了同一个文件里

 

实现功能介绍：

1.初始化自动生成两个愿望签

2.输入框失去焦点或者按回车键，会生成愿望签

3.点击关闭会删除愿望签

4.可以拖动愿望签，并且不能拖出可视窗口

5.根据可视窗口的大小，按比例改变愿望签在可视窗口中的位置

 

展示效果：

 

 

实现功能5的时候会有些困难，下面讲解一下如何得到比例，如下图

 

 

view是浏览器可视窗口，newView是浏览器放大后的可视窗口，

left是div元素距离浏览器左边的距离，right是div元素距离浏览器右边的距离

newleft是div元素距离浏览器放大后左边的距离，newright是div元素距离浏览器放大后右边的距离

view.width是浏览器的可视窗口宽度，newView.width是浏览器放大后可视窗口的宽度

我们可以得到以下公式

 

(newleft + newright)  - (left + right) = newView.width - view.width

left和right是按比例放大的，所有浏览器放大后增加的宽度，要按比例分配给newleft和newright

所以，

left / (left + right)  * (newView.width - view.width) = newleft - left;

所以，

newleft = left / (left + right)  * (newView.width - view.width) +left;