简介
在krpano中设计和安排图标layer有多种方式，常见的是使用png图片，如移花接木（4）- 使用导航条按钮
也可以使用插件库，如krpano中使用Font Awesome图标krpano中使用Font Awesome图标
另外，使用本教程的方法可进一步降低文件体积。
演示
代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<krpano> <style name="button" type="container" align="lefttop" edge="center" width="38" height="38" bgcapture="true" children="false" scalechildren="true" onover="" onout="" bg="true" bgcolor="0x000000" bgalpha="0.5" bgborder="1 0xffffff 1" bgroundedge="0"/> <layer name="buttonbar" type="container" width="250" height="50" align="bottom" y="10" keep="true"> <layer name="lb" style="button" x="20" y="20" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);"> <layer name="lico" type="text" html="<" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" /> </layer> <layer name="rb" style="button" x="58" y="20" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);"> <layer name="rico" type="text" html=">" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" /> </layer> <layer name="ub" style="button" x="96" y="20" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);"> <layer name="uico" type="text" html="<" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" rotate="90" /> </layer> <layer name="db" style="button" x="134" y="20" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);"> <layer name="dico" type="text" html="<" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" rotate="-90" /> </layer> <layer name="ib" style="button" x="172" y="20" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);"> <layer name="iico" type="text" html="+" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" /> </layer> <layer name="ob" style="button" x="210" y="20" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);"> <layer name="oico" type="text" html="−" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" /> </layer> <layer name="fs" style="button" x="248" y="20" onclick="switch(fullscreen);" devices="fullscreensupport"> <layer name="ofico" type="text" html="F" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" /> <layer name="cfico" type="text" html="F" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" /> </layer> </layer> <!-- events to change the fullscreen buttons --> <events name="buttonbarevents" keep="true" devices="fullscreensupport" onxmlcomplete="buttonbar_update_fullscreenbuttons();" onenterfullscreen="buttonbar_update_fullscreenbuttons();" onexitfullscreen ="buttonbar_update_fullscreenbuttons();" /> <action name="buttonbar_update_fullscreenbuttons"> if(fullscreen, set(layer[ofico].visible,false); set(layer[cfico].visible,true); , set(layer[ofico].visible,true); set(layer[cfico].visible,false); ); </action> </krpano> |
|
1 2 |
<layer name="lico" type="text" html="<" css="font-family:Arial; font-size:32px; color:#ffffff;text-align:center;" vcenter="true" bg="false" bgborder="0" bgroundedge="0" width="40" height="40" align="center" /> |
|
1 |
< |
更多的html代码可查看
https://www.toptal.com/designers/htmlarrows/