支付宝赞助帐号:service@kuitao8.com 

下载地址

动画下拉导航菜单插件下载

Created2016-06-07   Views 815    Author 懒人程序
动画下拉导航菜单插件下载
  1. function radToDeg(num) { 
  2.   return num*180/Math.PI; 
  3.  
  4. (function() { 
  5.  
  6.     var MyRenderer = { 
  7.       create: function() { 
  8.         return { controller: MyRenderer }; 
  9.       }, 
  10.       world: function(engine) { 
  11.         var cumulativeHeight = 0; 
  12.         for (var i=0; i<bodies.length; i++) { 
  13.           cumulativeHeight += bodies[i].height 
  14.           bodies[i].domelement.style.transform = 'translate3d(0px, '+(bodies[i].position.y-cumulativeHeight+(bodies[i].height/2)-startY)+'px, '+(-bodies[i].position.x)+'px) rotateX('+(radToDeg(bodies[i].angle)-90)+'deg)'
  15.         } 
  16.       }, 
  17.       clear: function(engine) { 
  18.       } 
  19.     }; 
  20.  
  21.     // Matter aliases 
  22.     var Engine = Matter.Engine, 
  23.         World = Matter.World, 
  24.         Bodies = Matter.Bodies, 
  25.         Body = Matter.Body, 
  26.         Composite = Matter.Composite, 
  27.         Composites = Matter.Composites, 
  28.         Common = Matter.Common, 
  29.         Constraint = Matter.Constraint, 
  30.         RenderPixi = Matter.RenderPixi, 
  31.         Events = Matter.Events, 
  32.         Bounds = Matter.Bounds, 
  33.         Vector = Matter.Vector, 
  34.         Vertices = Matter.Vertices, 
  35.         MouseConstraint = Matter.MouseConstraint, 
  36.         Mouse = Matter.Mouse, 
  37.         Query = Matter.Query; 
  38.  
  39.     var FreeFallMenu = {}; 
  40.  
  41.     var _engine, 
  42.         _sceneEvents = [], 
  43.         bodies = [], 
  44.         endConstraint, 
  45.         on = false 
  46.  
  47.     FreeFallMenu.init = function() { 
  48.  
  49.         // Uncomment for debug mode 
  50.         var container = document.getElementById('freefallmenu-container'); 
  51.  
  52.         var options = { 
  53.             positionIterations: 6, 
  54.             velocityIterations: 4, 
  55.             render: { 
  56.               controller: MyRenderer 
  57.             } 
  58.         }; 
  59.  
  60.         _engine = Engine.create(container, options); 
  61.         Engine.run(_engine); 
  62.  
  63.         var _world = _engine.world; 
  64.  
  65.         FreeFallMenu.reset(); 
  66.  
  67.         var groupId = Matter.Body.nextGroupId(); 
  68.         var menuElements = document.getElementsByClassName('freefallmenu-element'); 
  69.         var cumulativeHeight = 0; 
  70.  
  71.         //Bodies 
  72.         for (var i=0;i<menuElements.length;i++) { 
  73.           var height = menuElements[i].offsetHeight; 
  74.           bodies[i] = Bodies.rectangle(0, startY, height, 2.0, {groupId: groupId}); 
  75.           bodies[i].height = height; 
  76.           bodies[i].domelement = menuElements[i]; 
  77.           cumulativeHeight += bodies[i].height; 
  78.           Matter.Body.rotate(bodies[i],-startAngle); 
  79.           Matter.Body.translate(bodies[i],{x: (cumulativeHeight-height/2)*Math.cos(startAngle), y: -(cumulativeHeight-height/2)*Math.sin(startAngle)}); 
  80.           World.add(_world, bodies[i]); 
  81.         } 
  82.  
  83.         //Constraints 
  84.         var worldPositionConstraintX = (bodies[0].height/2-0.5)*Math.cos(startAngle); 
  85.         var worldPositionConstraintY = (bodies[0].height/2-0.5)*Math.sin(startAngle); 
  86.         World.add(_world, Constraint.create({ 
  87.             pointA: { x: 0, y: startY }, 
  88.             pointB: { x: -worldPositionConstraintX, y: worldPositionConstraintY }, 
  89.             bodyB: bodies[0], 
  90.             stiffness: 1, 
  91.         })); 
  92.         for (i=0;i<menuElements.length-1;i++) { 
  93.           World.add(_world, Constraint.create({ 
  94.             pointA: { x: (bodies[i].height/2-0.5)*Math.cos(startAngle), y: -(bodies[i].height/2-0.5)*Math.sin(startAngle) }, 
  95.             pointB: { x: -(bodies[i+1].height/2-0.5)*Math.cos(startAngle), y: (bodies[i+1].height/2-0.5)*Math.sin(startAngle) }, 
  96.             bodyA: bodies[i], 
  97.             bodyB: bodies[i+1], 
  98.             stiffness: 1, 
  99.           })); 
  100.         } 
  101.         endConstraint = Constraint.create({ 
  102.             pointA: { x: cumulativeHeight*Math.cos(startAngle), y: startY-cumulativeHeight*Math.sin(startAngle) }, 
  103.             pointB: { x: (bodies[bodies.length-1].height/2-0.5)*Math.cos(startAngle), y: -(bodies[bodies.length-1].height/2-0.5)*Math.sin(startAngle) }, 
  104.             bodyB: bodies[bodies.length-1], 
  105.             stiffness: 1, 
  106.             length: 0.01, 
  107.             angularStiffness: 1, 
  108.             render: { 
  109.                 strokeStyle: '#90EE90'
  110.                 lineWidth: 3 
  111.             } 
  112.         }); 
  113.         World.add(_world,endConstraint); 
  114.  
  115.         _sceneEvents.push( 
  116.  
  117.             Events.on(_engine, 'beforeUpdate'function(event) { 
  118.               if (!on) { 
  119.                 var engine = event.source; 
  120.                 var rotX = (bodies[bodies.length-1].height-0.5)*Math.cos(bodies[bodies.length-1].angle)/2; 
  121.                 var rotY = (bodies[bodies.length-1].height-0.5)*Math.sin(bodies[bodies.length-1].angle)/2; 
  122.                 var endPoint = Matter.Vector.add(bodies[bodies.length-1].position, {x:rotX, y:rotY}); 
  123.                 var cumulativeHeight = 0; 
  124.                 for (i=0;i<bodies.length;i++) { 
  125.                   cumulativeHeight+=bodies[i].height 
  126.                 } 
  127.                 var dest = { x: cumulativeHeight*Math.cos(startAngle), y: startY-cumulativeHeight*Math.sin(startAngle) }; 
  128.                 var dist = Matter.Vector.magnitude(Matter.Vector.sub(dest, endPoint)); 
  129.                 var normal = Matter.Vector.normalise(Matter.Vector.sub(dest, endPoint)); 
  130.                 var vectorToMove = Matter.Vector.add(endPoint, {x:(normal.x*Math.max(dist/50,1)), y:(normal.y*Math.max(dist/70,1))}); 
  131.                 if (dist > 1) { 
  132.                   // Moving the menu upwards 
  133.                   endConstraint.pointA = vectorToMove; 
  134.                 } 
  135.               } 
  136.             }) 
  137.  
  138.         ); 
  139.  
  140.         // Events 
  141.         var dropdownButton = document.getElementById('freefallmenu-button'); 
  142.         if (dropdownButton.addEventListener) { 
  143.             dropdownButton.addEventListener('mouseover', FreeFallMenu.mouseOver); 
  144.             dropdownButton.addEventListener('mouseout', FreeFallMenu.mouseOut); 
  145.         } else if (dropdownButton.attachEvent) { 
  146.             dropdownButton.attachEvent('mouseover', FreeFallMenu.mouseOver); 
  147.             dropdownButton.attachEvent('mouseout', FreeFallMenu.mouseOut); 
  148.         } 
  149.         for (var i=0;i<menuElements.length;i++) { 
  150.           var menuElement = menuElements[i]; 
  151.           if (menuElement.addEventListener) { 
  152.               menuElement.addEventListener('mouseover', FreeFallMenu.mouseOver); 
  153.               menuElement.addEventListener('mouseout', FreeFallMenu.mouseOut); 
  154.           } else if (menuElement.attachEvent) { 
  155.               menuElement.attachEvent('mouseover', FreeFallMenu.mouseOver); 
  156.               menuElement.addEventListener('mouseout', FreeFallMenu.mouseOut); 
  157.           } 
  158.         } 
  159.  
  160.     }; 
  161.  
  162.     FreeFallMenu.mouseOver = function() { 
  163.         on = true
  164.         endConstraint.pointA = null
  165.     }; 
  166.  
  167.     FreeFallMenu.mouseOut = function() { 
  168.         on = false
  169.     }; 
  170.  
  171.     if (window.addEventListener) { 
  172.         window.addEventListener('load', FreeFallMenu.init); 
  173.     } else if (window.attachEvent) { 
  174.         window.attachEvent('load', FreeFallMenu.init); 
  175.     } 
  176.  
  177.     var startAngle = 50 * Math.PI/180; 
  178.     var startY = 200; 
  179.  
  180.     FreeFallMenu.reset = function() { 
  181.  
  182.         var _world = _engine.world; 
  183.  
  184.         World.clear(_world); 
  185.         Engine.clear(_engine); 
  186.  
  187.         var renderController = _engine.render.controller; 
  188.         if (renderController.clear) 
  189.             renderController.clear(_engine.render); 
  190.  
  191.         for (var i = 0; i < _sceneEvents.length; i++) 
  192.             Events.off(_engine, _sceneEvents[i]); 
  193.         _sceneEvents = []; 
  194.  
  195.         Common._nextId = 0; 
  196.  
  197.         _engine.enableSleeping = true
  198.  
  199.         _mouseConstraint = MouseConstraint.create(_engine); 
  200.         World.add(_world, _mouseConstraint); 
  201.  
  202.     }; 
  203.  
  204. })(); 

 

上一篇: jquery 仿windows10菜单效果下载
下一篇:没有了
支持键盘 ← →

邮件订阅

订阅我们的精彩内容