漂亮漂亮的html5网页特效学习笔记(6)_拖拽图标跟随

this.$element=$(menu);这个.size=0;this.first=null;this.last=null;this.timeOut=null;this.hasMoved=false;this.status="关闭";}}项目是一样的。定义了一些，根据传入的背景设置背景颜色，使用foundation-icons设置图标。类项目{构造函数（图标，背景颜色）{这个。$element=$(document.createElement("div"));这。图标=图标；这。$元素。添加类（“项目”）;这。$元素。css("背景色",backgroundColor);vari=document.createElement("i");$(i).addClass("fi-"+图标);这个.$element.append(i);这。上一个=空；这个.下一个=空；this.isMoving=false;}}fundation-icons：注意这两句：根据传入的icon参数添加对应的class。是的，你没看错，就是根据类来确定图片。vari=document.createElement("i");$(i).addClass("fi-"+icon);看看foundation-icons里的两句话，就是用伪元素加content。很方便。我们只需要在js中调用它并添加一个类即可。.fi-address-book:before{内容:"\f100";}.fi-alert:before{内容：“\f101”；}如果你觉得图标大小不合适，也可以使用transform:scale()方法来改变它的大小哦。这里是foundation-icons官网，可以查看名字对应的图标。很多常用的图标都可以在https://zurb.com/playground/f...列出一些图标还是很好看的。第三步：然后是我们加入菜单项。注意，包括“三横”列表图标在内的五个图标都属于item，是通过add函数添加到菜单中的。菜单更像是一个看不见但可以控制的元素。qwq。注意draggable的地方，其实是调用了jquery-ui.min.js来实现拖拽。jQueryUI是一组基于jQueryJavaScript库构建的用户界面交互、效果、小部件和主题。无论您是要创建高度交互的Web应用程序还是只是将日期选择器添加到表单控件，jQueryUI都是完美的选择。参考：https://www.runoob.com/jquery...://jqueryui.com/。使用jquery-ui进行拖放可以做很多有趣的事情！因为在this.first==null中，只能拖动第一个列表图标，也就是“三横”图标。结合功能的实际内容，也很容易理解，一开始做什么，拖的过程中做什么，拖完之后做什么。添加（项目）{varmenu=this;if(this.first==null){this.first=item;this.last=item;//当菜单的第一个图标被点击时，看起来像三横线当图标显示时，菜单打开或关闭this.first.$element.on("mouseup",function(){menu.click();});//使用jquery-ui库实现拖动item.$element.draggable({start:function(){item.isMoving=true;}},{drag:function(){item.next.updatePosition();}},{stop:function(){item.isMoving=false;item.next.moveTo(item);}});}else{this.last.next=item;item.prev=this.last;this.last=item;}//在菜单末尾添加itemthis.$element.after(item.$element);}光看这里可能会有疑问，item.next.updatePosition()和下面的moveto只用了一次，所以呢？不是只有第二个图标可以换位置，第三到第五个图标不能换吗？这个其实看updatePosition()和moveto就可以理解——它们是递归调用的第四步：列表开启/关闭实现：如何点击列表图标让剩下的四个图标“滚出”或“回滚”“？还记得点击功能吗？好吧，使用一个while循环和一个迭代器让每个元素依次扩展/关闭。open(){this.status="open";varcurrent=this.first.next;变量迭代器=1;varhead=this.first;varsens=head.$element.css("left")