首页 > 代码库 > 我的项目8 css属性，实现阅读器重排版功能

我的项目8 css属性，实现阅读器重排版功能

2024-07-23 21:12:06   222人阅读

      对于小说阅读器，相信兄弟们都很熟悉，那么它是如何实现的呢？早这里分享一些经验之谈。

      首先，在我的思路中，在制定多页，和重排版功能的实现，可能需要用到CSS3的一个属性：column-count:3(多列)思路是这样的，也不知道对不对，用HTML5+CSS3写一个可阅读的文本，然后用column-count属性进行分列，在移动端里，那么一本书就相当于一个页面，而每一页则相当于一列，而通过改变column-count的值则实现了重排版功能。不多说分享示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webkit-column测试</title>
<style type="text/css">
body {background: #FFFFFF;}
strong {color:#ff0000;}
p {margin:0;text-indent:2em;}
* {-webkit-transition: all 200ms linear;}
#control {position: relative;z-index: -1;}
</style>
</head>

<body>
<script type="text/javascript">
window.onload = function() {
	var c_box = document.getElementById("control");
	
	var gCount = document.getElementById("get_count");
	var col_num = document.getElementById("column_num");
	col_num.onchange = function() {
		gCount.innerHTML = "<style>.c_count { -webkit-column-count:" + col_num.value + ";}</style><strong>" + col_num.value + "</strong>栏";
		c_box.style.zIndex = "1";
	}
	
	var gGap = document.getElementById("get_gap");
	var col_gap = document.getElementById("column_gap");
	col_gap.onblur = col_gap.onchange = function() {
		gGap.innerHTML = "<style>.c_count { -webkit-column-gap:" + col_gap.value + ";}</style><strong>" + col_gap.value + "</strong>";
	}
	
	var col_rule_c = document.getElementById("column_rule_color");
	var col_rule_v = document.getElementById("column_rule_va");
	var col_rule_t = document.getElementById("line_type");
	var gRule = document.getElementById("get_rule");

	
	col_rule_t.onchange = function() {
		if(col_rule_c.value =http://www.mamicode.com/= undefined || col_rule_v.value == ""){>

我的项目8  css属性，实现阅读器重排版功能


联系
我们