[简介]手机上实现装修效果前后分屏对比,当时是上下分屏比较直观,虽然krpano的webvr可以实现左右分屏,但竖屏就不行了,因此我们可以通过分屏iframe和HTML DOM addEventListener()方法监听同步两屏的视角状态,HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序,如果是电脑上观看可以加入onmousedown、onmousemove等事件,由于我们这次主要实现手机上的监听,因此可以使用针对移动端的touchstart、touchmove和touchend事件即可。
第一步:我们在页面上加入两个上下各半的iframe
1 2 |
<iframe id="frame1" src="vtour/1/index.html" width="100%" height="50%" style="top:0;position:fixed;border-width:0"></iframe> <iframe id="frame2" src="vtour/2/index.html" width="100%" height="50%" style="top:50%;position:fixed;border-width:0"></iframe> |
第二步:加入js监听上下两个iframe的触发事件,通过Krpano对象执行同步(核心代码样例)
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 |
function load(){ document.getElementById("frame1").addEventListener('touchstart',touch, false); document.getElementById("frame1").addEventListener('touchmove',touch, false); document.getElementById("frame1").addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": k2_obj.set("view.hlookat", k1_obj.get("view.hlookat")); k2_obj.set("view.vlookat", k1_obj.get("view.vlookat")); k2_obj.set("view.fov", k1_obj.get("view.fov")); break; case "touchend": break; case "touchmove": k2_obj.set("view.hlookat", k1_obj.get("view.hlookat")); k2_obj.set("view.vlookat", k1_obj.get("view.vlookat")); k2_obj.set("view.fov", k1_obj.get("view.fov")); break; } } } window.addEventListener('load',load, false); |
更多支持(非会员文章,需要请联系客服)
【咨询在线客服】