代码:
<? xml version="1.0" encoding="GB2312" ?> < canvas fontsize ="12" > < script > // 当前选项卡上被选的项目 var selectitem = 0; // 每条间的间距(没时间算居中, 手工找齐吧) var space = 82; </ script > < dataset name ="ds_dist" src ="temp.xml" /> <!-- 内部选择框 --> < view id ="selectrect" width ="70" height ="23" > < handler name ="oninit" > this.setSource("rect.gif"); </ handler > </ view > <!-- 外部菜单 --> < view > < view width ="750" x ="15" y ="2" > < simplelayout axis ="x" spacing ="50" /> < view id ="v_menu" width ="30" height ="30" datapath ="ds_dist:/Root/City/dist" > < wrappinglayout axis ="x" spacing ="50" /> <!-- 初始化 --> < handler name ="oninit" > ds_dist.doRequest(); </ handler > < handler name ="ondata" > var dp = new LzDatapointer(); dp.setPointer(this.datapath.p); var distname = dp.xpathQuery("text()"); this.subviews[0].setText(distname); </ handler > < text name ="dist" align ="center" fontstyle ="bold" fgcolor ="blue" ></ text > </ view > </ view > <!-- 鼠标事件代理 --> < attribute name ="moustracker_del" value ="$once{ new LzDelegate( this, 'trackmouse' )}" /> < handler name ="onmouseover" > // 注册实时监控代理 moustracker_del.register(LzIdle,'onidle'); </ handler > < handler name ="onmouseout" > // 取消注册 moustracker_del.unregisterAll(); </ handler > < handler name ="onclick" > // 跳转页面 LzBrowser.loadURL("http://test.aspx?id="+selectitem,"_blank"); </ handler > < method name ="trackmouse" > <![CDATA[ // 实现鼠标监控 var mou_x = this.getMouse('x') // var mou_y = this.getMouse('y'); // 记录的个数 var count = ds_dist.childNodes[0].childNodes[0].childNodes.length; // 判断区间并执行动画 for(var i=0;i<count;i++) { if(mou_x > i * space && mou_x < (i+1) * space) { selectrect.animate("x",space* i,1000,false,{motion:'easeboth'}); selectitem = i; } } ]]> </ method > </ view > </ canvas >
temp.xml
< Root > < City > < dist > 西岗区 </ dist > < dist > 沙河口区 </ dist > < dist > 中山区 </ dist > < dist > 干井子区 </ dist > < dist > 旅顺口区 </ dist > </ City > </ Root >
