做一个功能，当手指放装备图片上面时，上方出现一个装备信息的信息框

第一步：图片绑定监听事件

--根据服务器传回来信息，这里显示不同的图片
img:loadTexture(imgName)
img:setTouchEnable(true)
img:addTouchEventListener(rollCallBack)

local function rollCallBack(sender, eventType) 
    --配置信息里可根据图片itemid获取图片所有信息，sender._itemid读者可不理
    ExplainBoxButton(sender, sender._itemid)
end

第二步：包装显示信息框的函数，让手指放在图片上时，显示信息框，手指离开图片时，信息框销毁

function ExplainBoxButton(button, IconItemid)
    -- body
    if button ~= nil then
        --当button是OnTouchBegan、OnTouchMoved时isHighLighted()函数返回true
        --当button是OnTouchended、OnTouchCanceled时isHighLighted()函数返回false
        if button:isHighlighted() then
            if not button._isShowBox then
                --创建一个显示的box
                ExplainBoxView(button, tostring(IconItemid))
                button._isShowBox = true
            end
        else
            if button._isShowBox then
                RemoveExplainBoxLoading()
                button._isShowBox = false
            end
        end
    end
end

第三步：实现ExplainBoxView和RemoveExplainBoxLoading两个函数

function RemoveExplainBoxLoading()
    -- body
    local scene = cc.Director:getInstance():getRunningScene()
    local explainBox = scene:getChildByTag(20150729)
    if explainBox ~= nil then
        explainBox:removeFromParent()
    end
end

function ExplainBoxView(button, IconItemid, iconName)
    --这里创建一个信息框的类，便于后期的维护和修改
     local ExplainBox = require "ExplainBox"
     local scene = cc.Director:getInstance():getRunningScene()
     local explainBox = ExplainBox.create(IconItemid, iconName)
     scene:addChild(explainBox, 9999, 20150729)
     --下面是设置信息框的位置
     --获取父节点
     local parent = button:getParent()
     --通过父节点转换坐标为世界坐标
     local realPos = parent:convertToWorldSpace(cc.p(button:getPosition()))
     --button的宽高
     local buttonSize = button:getContentSize()
     explainBox:setPosition(320, realPos.y + buttonSize.height * button:getScale() * 0.5 + 50)
     explainBox:setAnchorPoint(0.5,0.5)
end

第四步：创建的ExplainBox里面创建背景，图片，描述信息，然后把图片和描述信息加在背景上面

.......
--这里简单写下，类里面内容
    --九宫格图片创建方法，cc.rect(0,0,59,59)为bg.png图片尺寸 cc.rect(29,29,1,1)设置九宫格拉升
    local bg = cc.Scale9Sprite:create("bg.png",cc.rect(0,0,59,59),cc.rect(29,29,1,1))
    --设置九宫格大小
    bg:setPreferredSize(cc.size(400,100))
    bg:setPosition(0,0)
    bg:setAnchorPoint(0.5,0.5)
    self:addChild(bg)

    local imgBorder = ccui.ImageView:create("table_equip_06.png")
    imgBorder:setPosition(10,50)
    imgBorder:setAnchorPoint(0,0.5)
    --这里需要注意下，九宫格拉升后，9个小图片的zorder是不同的，为了imgBorder能显示在bg上面，zorder设置为2
    bg:addChild(imgBorder, 2)

    local icon = ccui.ImageView:create(self.iconName)
    local targetSize = cc.size(60, 60)
    --不知道为什么这里只有这样才能控制图片大小，之前调用setContentSize函数，然而并没有用
    local iconSize = icon:getContentSize()
    icon:setScaleX(targetSize.width / iconSize.width)
    icon:setScaleY(targetSize.height / iconSize.height)
    icon:setAnchorPoint(0.5, 0.5)
    icon:setPosition(46,46)
    imgBorder:addChild(icon)

    local titleText = ccui.Text:create()
    titleText:setTextHorizontalAlignment(cc.TEXT_ALIGNMENT_LEFT)
    titleText:setTextVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_CENTER)
    titleText:setTextAreaSize(cc.size(280, 90))
    titleText:setFontSize(26)
    titleText:setFontName(SGGJLanguage.SimpleChineseTTF)
    titleText:setColor(cc.c3b(11, 214, 21))
    titleText:setString(self.ExplainText)
    titleText:setAnchorPoint(cc.p(0, 0.5))
    titleText:setPosition(cc.p(110, 50))
    bg:addChild(titleText,2)
.......

ps：本人也才接触cocos2d-lua这个游戏引擎半个月，所以不能保证里面内容是最好的，但是都是经过自己测试，能达到所需要的功能。
要是大家有更好方法，或者对我方法的建议，都可以留言或联系我wu_k_k@foxmail.com