XML动态菜单 （二）flash

在上一期的XML菜单的教程中，我们做了一个简单的纵向排列的XML文字菜单，并且在flash中附加了一个跟随鼠标的缩略图。缩略图的数据也是从XML中提取的。
在我们XML菜单教程的第二期，我们来解决另外一个问题。
我们都知道XML的方便，随意的更改，删除和添加数据。请注意，更改和删除还好，如果添加的话，这里就会有一个界面排版和用户使用的问题的。拿我们上一次的XML菜单来演示，我把我们的XML文件有添加了几十条内容，结果我们的XML菜单变成这样了：
http://www.keyframe1.com/tute/xmlMenu2/index2.htm
下面的菜单看不到了，可能很多人马上已经想到了解决这种问题的办法。对！我们要让我们的用户可以滚动浏览我们的XML菜单，就像这样：
http://www.keyframe1.com/tute/xmlMenu2/
现在你可以看到所以XML文件里的几十条记录全部在舞台上，并可以让用户来滚动浏览。无论你如何修改XML文件，永远是鼠标放在菜单顶端会停留在菜单的第一条，当鼠标滑动至菜单的底端时会停留在菜单的最后一条，无论XML文件的纪录条数，如果很短，滚动会自然不存在，如果超出规定菜单高度，就会像刚才所说的那样的规律来滚动，即便XML中有1000条记录也如此。
由于是建立在上一期教程的基础上的，一些在上一期中重复使用了的代码就不再讲解了。上一期XML菜单教程地址： XML动态菜单 （一）
第一步， 分析项目：
  > 组成部分
      - XML文件；
      - FLASH源文件；
      - 缩略图JPG文件，50px X 50px 存放在 thumb文件夹；
  > 步骤
      - 要使XML菜单可以滚动，最简单的办法就是把所有装有XML菜单的影片剪辑都放在一个母影片剪辑中；
      - 计算出正确的等式；
第二步，开始建立我们需要的一些元素，并把它们摆到大概理想的位置：
  > 一个放所有装有XML菜单的影片剪辑的母影片剪辑，我们叫做mcontainer 150px宽，高340px；
  > 两个上下箭头，只是为了美观；
  > 把mcontainer 影片剪辑在工作去摆到(310, 30)；
第三步，actionscripting


代码如下:

//这次我们添加了些新的变量由于计算方便需要
var menut:Number = 30; 
var menul:Number = 300; 
var menub:Number = 370; //菜单底部坐标
var menuw:Number = 150; //菜单宽度
var menuh:Number = menub - menut; //菜单在舞台显示高度 （也就是遮罩高度）
var home:MovieClip = this;
var mlh:Number = 20;
var tlh:Number = 60;
var speed:Number = 2;
//关于XML的读取我们就不再解释了，请参考上一期教程。我们直接进入本期教程的核心代码：鼠标滚动计算等式：
mcontainer.onEnterFrame = function()
{
    if(_root._xmouse > menul && _root._xmouse < (menul + menuw)) //当鼠标的滑动至菜单的舞台显示区域时激活滑动代码，我们不希望鼠标在舞台上任何地方移动时菜单都在滚动
    {
        var per:Number = (_root._ymouse - menut) / menuh; //计算鼠标从菜单顶部向下滑动了多少？并处以菜单高度得出鼠标移动的百分比
        var menuth:Number = mlh * numMenu; //利用菜单文字行距和XML记录总条数算出菜单实际高度
        //滚动菜单原理是：鼠标从菜单顶部向下滑动了百分之多少，菜单就相应的向上移动自己实际高度的百分之多少，然后再加上鼠标向下移动的实际像素数。呵呵，慢慢琢磨下应该不难理解，实在是没有更简单的解释方法，本身就是那么个单纯的事情
        mcontaindy = menut - menuth * per + menuh * per;
        mcontainoldy = this._y;
        this._y += (mcontaindy - mcontainoldy) / speed;
        if(_root._ymouse < menut)mcontainer._y = menut; //如果鼠标小于菜单顶部坐标，把菜单坐标写死到顶部坐标；
        if(_root._ymouse > menub)mcontainer._y = menut - menuth + menuh; //同样如果鼠标大于菜单底部坐标，把菜单坐标写死到底部坐标；
    }
}

这个就是本期最主要的代码了，其他的相信看过上一期教程的看看源文件的注解应该可以搞明白的。
现在我们可以真正随意修改，删除，添加我们的XML文件了，我们的XML菜单都可以满足用户的正常浏览使用。试试添加它500条记录。如果你在做一个相册，里面有上百张照片，这个可以是个不错的选择，滚动的简单文字标题和缩略图，使用起来应该很友好的。
下一期XML菜单教程希望尽快可以出来。 多谢阅读！

赞 (0)

相关推荐

  • C#实现基于XML配置MenuStrip菜单的方法

    C#实现基于XML配置MenuStrip菜单的方法

    本文实例讲述了C#实现基于XML配置MenuStrip菜单的方法.分享给大家供大家参考.具体如下: 1.关于本程序的说明 用XML配置MenuStrip菜单,本程序只是提供一个思路.程序在Load函数中根据XML文件中的设置动态生成一个MenuStrip组件的Items集合. 程序示例如下: 2.使用到的XML文档示例 <?xml version="1.0" encoding="gb2312"?> <!--MenuStrip:mnsMainMenu

  • C#递归读取XML菜单数据的方法

    C#递归读取XML菜单数据的方法

    本文实例讲述了C#递归读取XML菜单数据的方法.分享给大家供大家参考.具体分析如下: 最近在研究一些关于C#的一些技术,纵观之前的开发项目的经验,做系统时显示系统菜单的功能总是喜欢把数据写在数据库表,然后直接读取加载到菜单树上显示. 现在想把菜单数据都放在XML里,然后递归读取XML. 由于项目使用WCF,实体类使用了两个,一个是业务逻辑层中的实体,一个是调用业务逻辑层递归方法后进行数据实体的转换,XML读取方法写在业务逻辑层中. 思路: 1.先读取XML里所有的菜单 2.根据用户的权限显示所属

  • ASP XML制作菜单管理程序

    以下是menu.asp代码 程序代码 <% '--------------------------------------- '作者:野 草 '日期:2006年4月24日 'Q Q:94440079 '--------------------------------------- '读取XML文件函数 Function YCMS_menu() dim menu_temp,m Set goxml=Server.CreateObject("Microsoft.XMLDOM") gox

  • 一个无限级XML绑定跨框架菜单（For IE）

    不是很完善,但是能够应付基本的使用了 演示: http://test.empiresoft.net.cn:4/Test/MenuDemo/index.html (如果不能访问,可能是你的DNS服务器不支持别名解析) 使用方法: var menu = new Rimifon.Web.Menu(); menu.DataSource = "menu.xml"; menu.DataBind(document.body); //将菜单绑定到document.body内. xml数据格式: 复制代

  • javascript读取Xml文件做一个二级联动菜单示例

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu2level.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &

  • C#使用XML序列化操作菜单的方法

    本文实例讲述了C#使用XML序列化操作菜单的方法.分享给大家供大家参考.具体分析如下: 之前的一篇文章<C#递归读取XML菜单数据的方法>没使用XML序列化来操作菜单,而且发现那还有一个问题,就是在XML菜单的某个菜单节点前加上一些注释代码的就不能读取,现在使用XML序列化后可以很方便的读取,故在此写一写. XML菜单的节点代码如下: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>   &l

  • c# winform读取xml文件创建菜单的代码

    复制代码 代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using WinformMenu.Helper;using System.Xml; namespace WinformMen

  • c#使用Dataset读取XML文件动态生成菜单的方法

    本文实例讲述了c#使用Dataset读取XML文件动态生成菜单的方法.分享给大家供大家参考.具体实现方法如下: Step 1:Form1 上添加一个ToolStripContainer控件 Step2:实现代码 private void Form2_Load(object sender, EventArgs e) { CMenuEx menu = new CMenuEx(); string sPath = "D://Menu.xml";//xml的内容 if (menu.FileExi

  • 如何在XML中定义菜单

    如何在XML中定义菜单

    和Android UI layout一样,我们也可以在XML中定义应用程序的菜单.通过在菜单的onCreateOptionsMenu方法中膨胀菜单layout.这样做会使我们的程序代码简单多了,而且尽可能的将更多的界面设计部分放到XML,便于浏览. 1. 在工程的/res/文件夹下创建menu文件夹,用来保存你为应用程序定义的菜单XML文件. 在菜单XML layout中,有三个有效的元素:menu.group.item.item和group必须是menu的子元素,且item必须是group的子

  • XML动态菜单 （二）flash

    在上一期的XML菜单的教程中,我们做了一个简单的纵向排列的XML文字菜单,并且在flash中附加了一个跟随鼠标的缩略图.缩略图的数据也是从XML中提取的.在我们XML菜单教程的第二期,我们来解决另外一个问题.我们都知道XML的方便,随意的更改,删除和添加数据.请注意,更改和删除还好,如果添加的话,这里就会有一个界面排版和用户使用的问题的.拿我们上一次的XML菜单来演示,我把我们的XML文件有添加了几十条内容,结果我们的XML菜单变成这样了:http://www.keyframe1.com/tut

  • LayUI+Shiro实现动态菜单并记住菜单收展的示例

    LayUI+Shiro实现动态菜单并记住菜单收展的示例

    LayUI + Shiro + Thyemleaf 实现动态菜单并记住菜单收展 一.Maven 依赖 <dependencies> <!--阿里 FastJson依赖--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version> </depen

  • AngularJS动态菜单操作指令

    前言  在我们创建一个angularJS应用的时候,菜单往往往是不可或缺的元素之一.也许在我们静态菜单的时候不会发现在指令中操作菜单收缩.折叠展开没有任何问题,因为我们在操作之前,页面元素渲染已经完成,所以在指令里面通过element查找目标元素可以成功.但是一旦我们的菜单的数据不是静态而是通过后台接口加载动态数据渲染,我们会发现本来在静态写好的指令操作,在转变为动态数据加载之后,怎么也没法查找到想要的目标元素. 遇到如此问题,开始觉得好奇葩的,当然这也是吐槽一下,还是得好好解决问题的,痛定失痛

  • jQuery实现响应鼠标背景变化的动态菜单效果代码

    jQuery实现响应鼠标背景变化的动态菜单效果代码

    本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co

  • jquery实现动态菜单的实例代码

    jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式. 其具体步骤可以分为以下几步: •创建一个含有要表达的菜单的html页面 复制代码 代码如下: <html>  <head>    <title>jquery示例2:jquery菜单</title>    <meta http-equiv="Content-Type" content="text/html; ch

  • Android 动态菜单实现实例代码

    Android 动态菜单实现实例代码

    Android 动态菜单 先上效果图 比较简单,主要就是属性动画的使用和坐标角度的小细节. 实现 实现效果: 图标按照路径一路缩放渐变过来即可. 核心代码 /** * Item开启动画 * * @param btnItem * @param index * @param total * @param radius */ private void btnItemStartAnimator(View btnItem, int index, int total, int radius) { if (b

  • JavaScript动态生成二维码图片

    1.html代码 <div id="qrcode" style="width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;"></div> 2.引入外部js文件 <script src="QRCode.js"></script> 3.方法调用 var qrcode = new QRCode(document.getEleme

  • JS打字效果的动态菜单代码分享

    JS打字效果的动态菜单代码分享

    这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的JS打字效果的动态菜单代码如下 <html> <head> <title>JS打字效果的动态菜单</title> <meta http-equiv="imagetoolbar&

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

  • nodejs动态创建二维码的方法

    本文实例为大家分享了nodejs动态创建二维码的具体代码,供大家参考,具体内容如下 <!--弹出二维码--> <div class="qrcode"> <div> <p id="saoma">扫描二维码</p> </div> </div> js代码: $.ajax({ type: 'POST', url: '/house', data: { data:'你的数据' }, dataTy

随机推荐