Flash AS制作的仿苹果机的导航菜单

菜单|导航

  06年学类时,写的菜单效果。模仿苹果机中的菜单效果,鼠标经过图标时,以该图标为中心向两边缩放。

/**
 *MacintoshMenu(仿苹果机菜单)
 *Auther:流浪儿
 *Versoin:MacintoshMenu 1.0
**/
class MacintoshMenu {
 //属性
 private var target:MovieClip;
 private var imageContainer:MovieClip;
 private var imageArr:Array;
 private var total:Number;
 private var spanX:Number = 5;
 private var ypos:Number = Stage.height/2+50;
 //构造函数
 public function MacintoshMenu(target:MovieClip, imageArr:Array, scale:Number) {
  this.target = target;
  this.imageArr = imageArr;
  //
  total = imageArr.length;
  imageContainer = target.createEmptyMovieClip("imageContainer", 1);
  attachMc(scale);
  resetPosition();
 }
 //加载图片
 private function attachMc(scale:Number):Void {
  for (var i:Number = 0; i<total; i++) {
   var menu:MovieClip = imageContainer.attachMovie(imageArr[i], "menu"+i, i);
   mouseControlZoomEffect(menu, scale);
   menu.onRollOver = function() {
    //trace(this._name);
   };
  }
 }
 //鼠标控制缩放比例效果
 private function mouseControlZoomEffect(mc:MovieClip, scale:Number):Void {
  var owner:Object = this;//用一个临时变量指向当前类
  mc.onEnterFrame = function() {
   var mouseX:Number = Math.abs(this._x+this._width/2+owner.imageContainer._x-owner.imageContainer._parent._xmouse);
   //trace(mc._name+">>> "+mouseX);trace("");
   if (owner.imageContainer.hitTest(owner.target._xmouse, owner.target._ymouse)) {
    if (mouseX<scale) {
     var num:Number = 100+scale-mouseX;
     owner.zoomEffect(this, num);
    } else {
     owner.zoomEffect(this, 100);
    }
   } else {
    owner.zoomEffect(this, 100);
   }
   updateAfterEvent();
  };
 }
 //缩放效果
 private function zoomEffect(mc:MovieClip, scale:Number):Void {
  var ratio:Number = .4;
  mc._xscale = mc._yscale += (scale-mc._xscale)*ratio;
 }
 //重新设置各菜单的位置
 private function resetPosition():Void {
  var owner:Object = this;
  target.onEnterFrame = function() {
   for (var i:Number = 0; i<owner.total; i++) {
    var menu:MovieClip = owner.imageContainer["menu"+i];
    menu._x = owner.imageContainer["menu"+(i-1)]._x+owner.imageContainer["menu"+(i-1)]._width+owner.spanX;
    menu._y = owner.ypos-menu._height;
    owner.imageContainer._x = (Stage.width-owner.imageContainer._width)/2;
   }
   updateAfterEvent();
  };
 }
 //转义(位置、间距等)
 public function get _ypos():Number {
  return this.ypos;
 }
 public function set _ypos(values:Number):Void {
  this.ypos = values;
 }
 public function get _spanX():Number {
  return this.spanX;
 }
 public function set _spanX(values:Number):Void {
  this.spanX = values;
 }
 public function get _x():Number {
  return this.target._x;
 }
 public function set _x(values:Number):Void {
  this.target._x = values;
 }
 public function get _y():Number {
  return this.target._y;
 }
 public function set _y(values:Number):Void {
  this.target._y = values;
 }
}

时间: 2024-10-20 03:28:09

Flash AS制作的仿苹果机的导航菜单的相关文章

仿苹果电脑的导航菜单

06年学类时,写的菜单效果.模仿苹果机中的菜单效果,鼠标经过图标时,以该图标为中心向两边缩放.  attachMc(scale);   resetPosition();  }  //加载图片  private function attachMc(scale:Number):Void {   for (var i:Number = 0; i<total; i++) {    var menu:MovieClip = imageContainer.attachMovie(imageArr[i], &qu

Flash AS3制作个性的旋转圆形网页导航

核心提示:Flash AS3制作个性的旋转圆形网页导航教程. Flash AS3制作个性的旋转圆形网页导航. 1.用矩形工具绘制一个黑色的矩形,转换为MC影片剪辑,打开属性窗口 2.双击这个影片剪辑编辑它,使用文本工具,设置为动态文本,绘制一个区域,设置颜色是白色,命名实例名为abelBtn. 3.回到场景1,删除掉刚刚建立的影片剪辑. 4.我们选择第一帧,然后打开动作面板,输入下面代码,主要是为了导入Tweenlite engine. import com.greensock.*; impor

jQuery实现仿美橙互联两级导航菜单的方法

 这篇文章主要介绍了jQuery实现仿美橙互联两级导航菜单的方法,实例分析了jQuery操作css及setTimeout等实现导航菜单的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery实现仿美橙互联两级导航菜单的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

jQuery实现仿美橙互联两级导航菜单效果完整实例_jquery

本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

jQuery实现仿美橙互联两级导航菜单的方法_jquery

本文实例讲述了jQuery实现仿美橙互联两级导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

超酷仿苹果机桌面js+Css飞行菜单

演示在这里 基于Jquery和Fisheye,在IE 6, IE 7, Opera 9, Firefox 2, and Safari 2测试通过原文:http://www.ndesign-studio.com/blog/design/css-dock-menu/ 使用方法: 1.下载.先下载资源包 2.插入代码.在<head>区域插入以下代码: 代码: 以下是引用片段:<script type="text/javascript" src="js/jquery

精美的仿京东商城商品分类导航菜单代码

分类导航 按网站类别 企业建站 LOGO设计 网站设计 网站广告 推广 建网站 网站推广 网站建设 SEO 韩国男装 LOGO设计 网站设计 网站广告 推广 建网站 网站推广 网站建设 SEO 韩国童装 LOGO设计 网站设计 网站广告 推广 建网站 网站推广 网站建设 SEO 按品牌选货 热销推荐 LOGO设计 网站设计 网站广告 推广 建网站 网站推广 网站建设 SEO 网站建设 LOGO设计 网站设计 网站广告 推广 建网站 网站推广 推广 建网站 网站推广 推广 建网站 网站推广 网站建

仿猪八戒网首页导航菜单

首页 广告代码 CSS教程 导航菜单 溶图素材 常用代码

仿chinaz下拉导航菜单

网页特效 新闻资讯 . 业界动态 | 收购融资 | 门户动态 | 搜索引擎 | 网络游戏 | 电子商务 | 广告传媒 | 厂商开发 站长在线 . 好站推荐 | 站长聚会 | 站长访谈 | 站长茶馆 | 网站排行 网站运营 . 建站经验 | 策划盈利 | 搜索优化 | 网站推广 | 免费资源 设计在线 . 酷站推荐 | 网页设计 | WEB标准 | 视频处理 | 设计活动 网络编程 . Asp编程 | Php编程 | .Net编程 | Xml编程 | Access | Mssql | Mysql