[摘要]学习领主教程后，自己尝试制作了一个图片弹窗，分享给大家使用，可以支持鼠标和手势缩放，不同弹窗可以用不同图片替换。
主要代码
//鼠标滚轮缩放事件监听
|
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<events onmousewheel="image_onmousewheel(test_zoom);" /> <!-- the action for zooming either via the mouse wheel for via touch gestures --> <action name="image_onmousewheel"> if(iszoom, if(wheeldelta_touchscale GT 0, <!-- touch zoom --> if(startzoom, set(startzoom,false); copy(start_wheeldelta_touchscale, wheeldelta_touchscale); copy(start_imagescale, layer[%1].scale); ); div(tmp, wheeldelta_touchscale, start_wheeldelta_touchscale); mul(layer[%1].scale, start_imagescale, tmp); if(layer[%1].scale GT 1,set(layer[%1].scale,1)); if(layer[%1].scale LT 0.3,set(layer[%1].scale,0.3)); , <!-- mouse wheel zoom --> mul(sit,get(wheeldelta),0.05); mul(sit,layer[%1].scale); add(layer[%1].scale,sit); if(layer[%1].scale GT 1,set(layer[%1].scale,1)); if(layer[%1].scale LT 0.3,set(layer[%1].scale,0.3)); ); ); </action> //弹窗蒙版 <layer name="pic_text_window" type="container" bgcolor="0x000000" bgalpha="0.9" keep="true" width="100%" height="100%" visible="false"> <!--导入蒙版 --> <layer name="radarmask" type="container" align="center" x="0" y="0" width="60%" width.mobile="95%" height="60%" height.mobile="95%" maskchildren="true"> <!--导入滚动插件 --> <layer name="scrollarea" url="plugins/scrollarea.swf" alturl="plugins/scrollarea.js" align="center" width="150%" height="150%" direction="all" keep="true" mwheel="false"> <!--插入缩放图片--> <layer name="test_zoom" url="" scale="0.6" align="center" edge="center" keep="true" onloaded="" ondown="" x="0" y="0" width="750" height="800" onover=" set(iszoom, true); set(startzoom, true); copy(copy_mousefovchange, control.mousefovchange); copy(copy_touchzoom, control.touchzoom); set(control.mousefovchange, 0); set(control.touchzoom, false); " onout=" set(iszoom, false); copy(control.mousefovchange, copy_mousefovchange); copy(control.touchzoom, copy_touchzoom); " ondown.touch="onover();" onup.touch="onout();" > </layer> </layer> </layer> <layer name="close_btn" url="skin/close.png" keep="true" align="righttop" x="10" y="10" onhover="showtext(关闭图片);" onclick="layer[scrollarea].scrolltocenter(880,400);set(layer[pic_text_window].visible,false);set(layer[test_zoom].scale,0.6)"/> </layer> <scene name="scene_1" title="1" onstart="" havevrimage="true" thumburl="panos/1.tiles/thumb.jpg" lat="" lng="" heading=""> <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" /> <preview url="panos/1.tiles/preview.jpg" /> <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled"> <level tiledimagewidth="1024" tiledimageheight="1024"> <cube url="panos/1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" /> </level> </image> <image if="webvr.isenabled"> <cube url="panos/1.tiles/vr/pano_%s.jpg" /> </image> //通过热豆动作切换layer内的图片 <!-- place your scene hotspots here --> <hotspot name="spot1" url="skin/vtourskin_hotspot.png" ath="0.000" atv="0.000" linkedscene="scene_1" onclick="set(layer[pic_text_window].visible,true);set(layer[test_zoom].url,skin/zd.png);" /> <hotspot name="spot2" url="skin/vtourskin_hotspot.png" ath="50.000" atv="0.000" linkedscene="scene_1" onclick="set(layer[pic_text_window].visible,true);set(layer[test_zoom].url,skin/4.jpg);" /> </scene> |
