基于JS快速实现导航下拉菜单动画效果附源码下载

前端之家收集整理的这篇文章主要介绍了基于JS快速实现导航下拉菜单动画效果附源码下载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这是一个带变形动画特效的下拉导航菜单特效。该导航菜单菜单项之间切换时,下拉菜单快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒。

快速的导航下拉菜单动画效果如下所示:

HTML

该导航菜单的HTML结构如下:

CSS样式请参照源码中的css/style.css文件

Javascript

为了实现这个导航菜单,特效中创建了一个morphDropdown对象。并使用bindEvents ()方法来处理元素的事件。

show dropdown self.showDropdown($(this)); }).mouseleave(function(){ //if not hovering over a nav item or a dropdown -> hide dropdown if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown(); }); //... }; showDropdown方法用于处理宽度、高度和.dropdown-list元素的translateX值,以及放大和缩小.bg-layer元素。 morphDropdown.prototype.showDropdown = function(item) { var selectedDropdown = this.dropdownList.find('#'+item.data('content')),selectedDropdownHeight = selectedDropdown.innerHeight(),selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2; //update dropdown and dropdown background position and size this.updateDropdown(selectedDropdown,parseInt(selectedDropdownHeight),selectedDropdownWidth,parseInt(selectedDropdownLeft)); //add the .active class to the selected .dropdown and .is-dropdown-visible to the .cd-morph-dropdown //... }; morphDropdown.prototype.updateDropdown = function(dropdownItem,height,width,left) { this.dropdownList.css({ '-moz-transform': 'translateX(' + left + 'px)','-webkit-transform': 'translateX(' + left + 'px)','-ms-transform': 'translateX(' + left + 'px)','-o-transform': 'translateX(' + left + 'px)','transform': 'translateX(' + left + 'px)','width': width+'px','height': height+'px' }); this.dropdownBg.css({ '-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')','-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')','-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')','-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')','transform': 'scaleX(' + width + ') scaleY(' + height + ')' }); };

以上所述是小编给大家介绍的基于JS快速实现导航下拉菜单动画效果附源码下载。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章