html
1<script src="jquery.js"></script>
2<script>
3var s = location.search.split("?");
4// M = Main html & timer start !!
5// 1-9 = sub.html & background-colors valiations.
6window.onload = function() {
7 console.log("OK:" + s[1]);
8 var t = document.getElementById("tbl");
9 console.log("td length = " + $("td", t).length);
10 if (s[1] == "M") {
11 t.style.display = "block";
12 wipe();
13 } else {
14 t.style.display = "none";
15 var o = document.getElementById("ID_" + s[1]);
16 if (o != null) {
17 o.style.display = "block";
18 }
19 }
20}
21function wipe() {
22 var flag = true;
23 var tds = $("td");
24 var counter = 1;
25 var width=[100, 0];
26 setInterval(function() {
27 console.log(tds.length + " :: " + width);
28 if (flag) {
29 if (width[0] > 0) {
30 $(tds[0]).css("width", (width[0]--) + "%");
31 $(tds[1]).css("width", (width[1]++) + "%");
32 } else {
33 flag = false;
34 $("iframe", tds[0]).attr("src", "main.html?" + counter);
35 counter += 1;
36 }
37 } else {
38 if (width[0] < 100) {
39 $(tds[0]).css("width", (width[0]++) + "%");
40 $(tds[1]).css("width", (width[1]--) + "%");
41 } else {
42 flag = true;
43 $("iframe", tds[1]).attr("src", "main.html?" + counter);
44 counter += 1;
45 }
46 }
47 if (counter > 8) counter = 1;
48 }, 100);
49}
50</script>
51<style>
52html,body {
53 width:100%;
54 height:100%;
55 margin:0;
56 padding: 0;
57 overflow:hidden;
58}
59div {
60 width: 100%;
61 height: 100%;
62 display: none;
63}
64table {
65 width: 100%;
66 height: 100%;
67 display: none;
68}
69
70</style>
71<div id="ID_1" style="background-color:pink;">
72</div>
73<div id="ID_2" style="background-color:gray;">
74</div>
75<div id="ID_3" style="background-color:lime;">
76</div>
77<div id="ID_4" style="background-color:yellow;">
78</div>
79<div id="ID_5" style="background-color:magenta;">
80</div>
81<div id="ID_6" style="background-color:green;">
82</div>
83<div id="ID_7" style="background-color:tomato;">
84</div>
85<div id="ID_8" style="background-color:#CCC;">
86</div>
87
88<table id="tbl">
89 <tr>
90 <td width="99%"><iframe id="leftFrame" src="main.html?1" style="width: 100%; height: 100%" frameborder="no"></iframe></td>
91 <td width="1%"><iframe id="rightFrame" src="main.html?2" style="width: 100%; height: 100%" frameborder="no"></iframe></td>
92 </tr>
93</table>
↑追記、frameset は幅を変更できなかったので、iframe に変更する。
PCでもカクカクしますね。
ページをめくる、ような動きをさせたいのでしょうけど、これ重いからやめて、フェードIN,OUT にしたら
どうですか。
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<frameset cols="100%,0%">
<frame src="left.html?1" />
<frame src="left.html?2" />
</frameset>
たとえば、ですが、左右にワイプするのはダメですか。
上記のフレームきると、縦線で左右に仕切られます。初期表示は、 100%,0% なので、左枠がいっぱい表示です。右端の中央線を左に移動すると自動的に右が見えてきます。0%,100% になった時点で今度は、左から右へ、これを繰り返す。
たぶん、 div のような、クリッッピングされたイメージをタイマーで動かすことでwebview のリソースを食い、動きがぎこちなくなるんだと思うのです。
左か右が 0% になったら、再読込すればいいのでは、と思うのです。
なぜwebview にこだわるのか、要件をもう少し具体的にお話しくださるともう少し皆の興味がここに向くとおもいますね。今のままだと前、前々スレ同様、コメントなし or よくて1つとかになりそうです。
一番ネックなのは、実機確認が必要ってこと。シミュレータだとPCのCPUパワーの恩恵でカクカクが再現
しないんですよね。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/24 12:31