An arc menu plug-in written by native js

An arc menu plug-in written by native js
An arc menu is a semi-arc menu or a fully arc menu, which is different from the traditional horizontal or vertical menu. I recently saw many people on the internet write this effect, so I tried to write it myself. Implementation Method: Main Structure of Original Ecology js: 1. parameter merging and copying code 1 var defapra upa = {2 mainMenuId: "ArcMenu", // Main Menu id 3 menuBoxId: "menuBox", // menu package id 4 position :"", // arc menu 5 customPosition: "200", // custom position 6 speed: 200, // expansion speed 7 radius:, // radiation distance, 8 menuRange: 90, // Menu expansion range 9 childMenuClass: "Menu", // sub-Menu default class 10 triggerWay: "click", // trigger mode 11 showStatus: false, // sub menu Current Status 12 childMenu: [// sub menu content 13 {linkContent: "menu 1", linkUrl: "http://www.baidu.co M ", className:" Menu "}, 14 {linkContent:" Menu 2 ", linkUrl:" http://www.baidu.com ", className:" Menu "}, 15 {linkContent: "Menu 3", linkUrl: "http://www.baidu.com", className: "Menu"}, 16 {linkContent: "Menu 4", linkUrl: "http://www.baidu.com", className: "Menu "}, 17 {linkContent: "Menu five", linkUrl: "http://www.baidu.com", className: "Menu"}, 18] 19} copy code 1 for (var I in defaultupa) {2 if (options [I]) {3 d Efaultupa [I] = options [I]; 4} 5} This structure updates the parameters passed in by the constructor to the default parameter 2. arc position setting 1: left in the upper left corner, left in the upper left corner, left in the lower left corner, right in the upper right corner, right in the lower right corner, and bottom copy code 1 var childLen = defapra upa. childMenu. length; // number of sub-menus 2 var circular = 2 * Math. PI/360 * (parseFloat (defaultupa. menuRange)/childLen); // radian after split 3 var positionStr = defapra upa. position? Defaultupa. position: "left, top"; // The position of the master button 4 var customPositionStr =/^ \ d +, \ d + $/. test (defaultupa. customPosition )? Defapra upa. customPosition: "0, 0"; // custom position 5 var positionVal = defapra upa. position. split (","); 6 var customPositionVal = defaultupa. customPosition. split (",") 7 mainMenu. style [positionVal [0] = customPositionVal [0] + "px"; // initialize the main menu position 8 mainMenu. style [positionVal [1] = customPositionVal [1] + "px"; // initialize the position of the Main Menu 9 for (var I = 0; I <childLen; I ++) {// cyclically initialize sub-menus, add attributes, categories, and so on, and add them to the menu Package Box 10 var domA = document. create Element ("a"); 11 var currChild = defapra upa. childMenu [I]; 12 domA. innerHTML = currChild. linkContent; 13 domA. setAttribute ("href", currChild. linkUrl); 14 domA. className = defapra upa. mainMenuId + defaultupa. childMenuClass + "" + defapra upa. childMenuClass + "" + currChild. className; 15 domA. style [positionVal [0] = customPositionVal [0] + "px"; 16 domA. style [positionVal [1] = customPositionVal [1] + "px"; 17 m EnuBox. appendChild (domA); 18} the code is copied to calculate the attributes (left, top...) based on the position of the main menu button in the input parameter ...) assign values, calculate the radians based on the number of sub-menus, and then calculate the expanded radius of the sub-menu according to the expanded radius. Create the sub-menu dom, configure the text and class name for the sub-menu, and add them to the dom. 3. the sub-menu expands the animation and the main button through the set trigger mechanism to bind the copy code 1 function addEvent (obj, type, fn) {// compatible with the binding event method 2 if (obj. addEventListener) {3 obj. addEventListener (type, fn, false); 4} else if (obj. attachEvent) {5 obj ["e" + type + fn] = fn; 6 obj. attachEvent ("on" + type, function () {7 obj ["e" + type + fn] (); 8}); 9} 10 }; copy code copy code 1 addEvent (mainMenu, defaultupa. triggerWay, function () {2 va R len = defapra upa. childMenu & defaultupa. childMenu. length | 0; 3 var data = []; 4 for (var I = 0; I <len; I ++) {// target position style value Object required for Loop Production animation 5 var obj = new Object (); 6 var v0 = parseFloat (mainMenu. style [positionVal [0]); 7 var v1 = parseFloat (mainMenu. style [positionVal [1]); 8 if (defaultupa. showStatus) {9 obj [positionVal [1] = v1; 10 obj [positionVal [0] = v0; 11} else {12 obj [positionVal [0] = defaultP Ra. radius * Math. cos (I * circular) + v0; // calculates the transverse coordinate 13 obj [positionVal [1] = defapra upa. radius * Math. sin (I * circular) + v1; // calculates the longitudinal coordinate 14} 15 data. push (obj); 16} 17 currAnimate = animate (menuBox. getElementsByClassName (defaultupa. mainMenuId + defaultupa. childMenuClass), data, defapra upa. speed); 18 defapra upa. showStatus =! Defapra upa. showStatus; // modify the current menu expansion status 19}); copy the code and copy code 1 function animate (domObj, animateObj, speed) {// animation method domobj is a collection of all dom objects to be animated. animateObj is the animation parameter corresponding to the animation dom, and speed is the animation speed 2 var lenAni = animateObj & animateObj. length | 0; 3 var I = 0; 4 var trimer = 0 5 var aniArr = []; 6 this. animateCollect = []; 7 this. stop = function () {8 for (var j = 0; j <this. animateCollect. length; j ++) {9 this. animateCollect [j]. Stop (); 10} 11} 12 this. start = function () {13 this. animateCollect = func (); 14} 15 var func = function () {16 aniArr [I] = new Object (); 17 aniArr [I]. isAnimate = false; 18 aniArr [I]. trimer = 0; 19 aniArr [I]. interval = setInterval (function () {20 if (I = lenAni) {21 return aniArr; 22} 23 aniArr [I]. isAnimate = true; 24 for (var k in animateObj [I]) {25 if (aniArr [I]. trimer = 0) {26 domObj [I] [k] = parseF Loat (domObj [I]. style [k]) 27} 28 domObj [I]. style. display = "block"; 29 domObj [I]. style [k] = (parseFloat (domObj [I]. style [k]) + (parseFloat (animateObj [I] [k])-domObj [I] [k])/(parseFloat (speed)/1 )))) + "px"; 30} 31 aniArr [I]. trimer + = 1; 32 if (aniArr [I]. trimer> = speed) {33 clearInterval (aniArr [I]. interval); 34 aniArr [I]. isAnimate = false; 35 aniArr [I]. trimer = 0; 36 I ++; 37 func (); // recursively execute the next animation 38} 39}, 1); 40 aniArr [I]. stop = function () {// animation end 41 clearInterval (aniArr [I]. interval); 42 aniArr [I]. isAnimate = false; 43 aniArr [I]. trimer = 0; 44 45} 46 47}; 48 this. start (); 49} copying code native JavaScript to implement animation is a bit boring, and js is not very precise in arithmetic computation. Of course, some methods are used to solve and make up for the style that needs to be used, the style adopts css3, Which is incompatible, but mainly for js exercises. The style can be freely switched to copy code 1 # menuBox according to your preferences. topMenu, # menuBox. menu {display: block; width: 50px; height: 50px; 2 background-color: red; 3 border-radius: 25 Px; 4 text-align: center; 5 line-height: 50px; 6 font-family:; 7 font-size: 14px; 8 color: # fff; 9 position: absolute; 10 display: none; 11} 12 13 # menuBox. topMenu14 {15 z-index: 99999; 16 display: block; 17} 18 # menuBox. slefclass {// custom style 19 width: 50px; 20 height: 50px; 21 background-color: #00ff21; 22} copy code page call method copy Code <div id = "menuBox"> <! -- This id is menuBox by default. to change it, you need to configure --> <a id = "MenuParent"> menu </a> <a id = "MenuParent1"> menu </a> <a id = "MenuParent2 "> menu </a> <a id =" MenuParent3 "> menu </a> <a id =" MenuParent4 "> menu </a> <a id =" MenuParent5"> menu </a> </div> <script> ArcMenu ({mainMenuId: "MenuParent", position: "left, bottom", customPosition: "500,400", // custom position childMenu: [// The node data of the sub-menu. You can customize the style class, or not. Default Menu {linkContent: "Menu 1", linkUrl: "http://www.baidu.com", className: "Menu"}, {linkContent: "Menu 2", linkUrl: "http://www.baidu.com", className: "Menu" },{ linkContent: "Menu 3", linkUrl: "http://www.baidu.com", className: "Menu" },{ linkContent: "Menu 4", linkUrl: "http://www.baidu.com ", className: "Menu" },{ linkContent: "Menu five", linkUrl: "http://www.baidu.com", className: "Menu" },{ linkContent: "Menu six", linkUrl: "http://www.baidu.com", className: "Menu" },{ linkContent: "Menu 7", linkUrl: "http://www.baidu.com", className: "Menu" },{ linkContent: "Menu 8 ", linkUrl: "http://www.baidu.com", className: "Menu"}, {linkContent: "Menu 9", linkUrl: "http://www.baidu.com", className: "Menu"},], radius: 100, // radiation distance, menuRange: 360, // menu expansion range: speed: 22 // expansion speed}) ArcMenu ({mainMenuId: "MenuParent1", position: "left, top ", speed: 50}) ArcMenu ({mainMenuId: "MenuParent2", position: "right, top"}) ArcMenu ({mainMenuId: "MenuParent3", position: "left, bottom "}) ArcMenu ({mainMenuId:" MenuParent4 ", position:" right, bottom "}) ArcMenu ({mainMenuId:" MenuParent5 ", position:" left, bottom ", customPosition: "800,400", childMenu: [{linkContent: "menu 1", linkUrl: "http://www.baidu.com", className: "slefclass"}, {linkContent: "menu 2", linkUrl: "http://www.baidu.com", className: "slefclass" },{ linkContent: "menu 3", linkUrl: "http://www.baidu.com", className: "slefclass" },{ linkContent: "menu 4 ", linkUrl: "http://www.baidu.com", className: "slefclass" },{ linkContent: "menu five", linkUrl: "http://www.baidu.com", className: "slefclass" },{ linkContent: "menu 6", linkUrl: "http://www.baidu.com", className: "slefclass" },{ linkContent: "menu 7", linkUrl: "http://www.baidu.com", className: "slefclass "}, {linkContent: "menu 8", linkUrl: "http://www.baidu.com", className: "slefclass"}, {linkContent: "menu 9", linkUrl: "http://www.baidu.com", className: "slefclass"},], radius: 100, // radiation distance, menuRange: 360, // menu expansion range: speed: 22}) </script>