<canvas width="800" height="600">
<dataset name="ds_photo" src="/photo.xml"/>
<script>
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};
function rand(number) {
return Math.ceil(rnd()*number) >=50?rand(number):Math.ceil(rnd()*number);
};
</script>
<alert name="myalert">
a
</alert>
<view x="140" name="main">
<view name="imagelist" datapath="ds_photo:/items/item/@url"
width="135" height="135" stretches="both" x="0" y="10" onclick="showThis(this)" onmouseover="rotate()" onmouseout="rotateback()">
<attribute name="rotationratio"/>
<method name="applyData" args="imageId">
var image = "" + imageId;
this.setSource(image);
</method>
<method name="rotate">
this.rotationratio = this.rot.to;
//Debug.write(this.rotationratio);
this.animate('rotation','0','500');
</method>
<method name="rotateback">
this.animate('rotation',this.rotationratio,'500');
</method>
<method name="showThis" args="that">
canvas.showDetail.setVisible(true);
</method>
<animator name="rot" attribute="rotation" to="${rand(50)}" duration="100" relative="false" />
</view>
<simplelayout axis="x" spacing="100"/>
</view>
<window name="showDetail" width="400" height="300" oninit="${this.setVisible(false)}">
</window>
</canvas>
本文介绍了一种利用canvas实现动态图片展示的方法,并通过JavaScript添加了交互功能,如鼠标悬停时图片旋转等效果。该方案还涉及图片数据加载及动态显示的处理方式。
188

被折叠的 条评论
为什么被折叠?



