label和slideimage共存|用得到的就拿去-优快云博客

本文介绍了一种在不改变标签层级关系的情况下，通过在标签上添加position和relative属性来实现标签相对定位的方法。这种方法可以将Label标签置于SlideImage之上，并支持设置透明度等样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]要求：[/b]Label标签置于slideimage之上并透明
[b]限制：[/b]因为label文本标签和slideimage标签并不是父级和子级关系，所以不能内置到slideimage里
[b]方法：[/b]在label标签上添加position和relative两个属性，并定义好slideimage的id属性
[b]代码：[/b]

<label style="background:white;alpha:0.6;corner-radius:20;" position="bottomcenter" relative="slideimage">店主亲自护送小主来到您的身边 保证小主健康活泼~</label>
<slideimage id="slideimage" style="background:black;height:197" indicatorPosition="right" fillwidth="true">
    <item src="http://pic36.nipic.com/20131125/8821914_094008340001_2.jpg"/>
</slideimage>

position属性包括topleft、topcenter、topright、middleleft、middleright、bottomleft、bottomcenter、bottomright、aboveleftof九个位置。relative的值对应目标控件的id属性。

如图1，点击title里的左侧图标出现图2所示的菜单栏也可以使用position和relative两个属性，同时在图标上添加onclick点击事件
Js代码：

var menu_status = 0;
function openmenu(){
	if (menu_status==0){
		$('button1').css('display:block');
		$('button2').css('display:block');
		$('button3').css('display:block');
        $('button4').css('display:block');
        $('button5').css('display:block');
        $('button6').css('display:block');
        menu_status = 1;
	}else {
        $('button1').css('display:none');
        $('button2').css('display:none');
        $('button3').css('display:none');
        $('button4').css('display:none');
        $('button5').css('display:none');
        $('button6').css('display:none');
        menu_status = 0;
    }
}

布局代码：

<label id="button1" style="display:none" position="topleft" relative="slideimage">用户信息</label>
<label id="button2" style="display:none" position="topcenter" relative="slideimage">用品保修</label>
<label id="button3" style="display:none" position="topright" relative="slideimage">自取地址</label>
<label id="button4" style="display:none" position="topleft" relative="slideimage">客服咨询</label>
<label id="button5" style="display:none" position="topcenter" relative="slideimage" onclick="$page.open('product.xml')">宠物寄养</label>
<label id="button6" style="display:none" position="topright" relative="slideimage">我要加盟</label>
<slideimage id="slideimage" style="background:black;height:197" indicatorPosition="right" fillwidth="true">
    <item src="http://pic36.nipic.com/20131125/8821914_094008340001_2.jpg"/>
</slideimage>

图1
[img]http://chuantu.biz/t5/33/1473760514x1822611387.jpg[/img]
图2
[img]http://chuantu.biz/t5/33/1473760541x1822611387.png[/img]

代码编辑点击->[url=http://www.imagapp.com/]爱码哥移动应用开发平台[/url]