Professional Documents
Culture Documents
28.1
28.2
28.3
/ drawText_
multiline()
SUMMARY
28-2
HTML5 ()
11.1
HTML5HTML5
PART 1
HTML5 ()
28-3
28
JSON
Canvas
28.1
A A
28-2
HTML5 ()
28.1
HTML5 ()
28-3
28
2-3
28.2
<ul>
<canvas>
<li> <ul>
<body>
<div id="contianer">
<div id="slide_section">
<div id="previous-bar" class="nav" style="left: 0px;">
<img id="previous" src="images/previous.png"
onclick="pre_next_handler(this)" />
</div>
()
28-4
HTML5 ()
28.2
<ul id="article">
</ul>
</div>
<aside id='readerTool'>
<div>
<ul id="fontSize">
<li>
<img src="images/fontsize-e.png" onclick="enlarge()"></li>
<li>
<img src="images/fontsize-r.png" onclick="reduce()"></li>
</ul>
<ul>
<li>
<img family="pk" src="images/fontsize-pk.png"
onclick="set_font_family(this)" /></li>
</ul>
<ul>
<li>
<img src="images/padyellow.png" onclick="setTag()"></li>
<li>
<img src="images/padyellow_d.png"
onclick="clearAllTag()"></li>
</ul>
<ul id="tag_list">
</ul>
</div>
<img id="next_page_img" src="images/next_page.png"
onclick="pre_next_handler(this)" />
</aside>
</div>
<footer>
<nav>
<div id="footer_nav_left">
<ul id="pageNav">
</ul>
</div>
<div id="footer_nav_right">
<ul id="chapterNav">
</ul>
</div>
</nav>
<div class='footer-container'>
html5.kangting.tw
<div>
Copyright 2012 kangting.tw All Rights Reserved.
</div>
</div>
</footer>
</body>
HTML5 ()
28-5
28
28.3
JavaScript
JavaScript
article.js
drawContent.js
movePage.js
var-constant.js
drawContent.js
window.onload = function () {
//
var ul_chapter = document.getElementById('chapterNav');
var chapters = novel.chapter_info;
for (key = 0; key < chapters.length; key++) {
var chapterName = chapters[key].chapter_title;
var li_chapter = document.createElement('LI');
li_chapter.setAttribute('onclick', 'moveChapter(this)');
li_chapter.setAttribute('c_index', key);
li_chapter.innerHTML = '<label>' + chapterName + '</label>';
ul_chapter.appendChild(li_chapter);
}
create_cover();
//
drawChapter();
}
()
28-6
HTML5 ()