<!doctype html><html>?<head>??<meta charset="utf-8">??<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">??<meta name="format-detection" content="telephone=no">??<link rel="stylesheet" type="text/css" >??<style>???html{????width: 100%;????height: 100%;????overflow-x: hidden;???}???body{????text-align: left;????width: 100%;????overflow: hidden;????background-color:#e9dfc7;????margin: 0px;????padding: 0px;???}???.m-read-content{????font-size:14px;????color: #555;????line-height: 31px;????padding: 15px;???}???.m-read-content h4{????font-size:20px;????color: #736357;????border-bottom: 1px solid #736357;????letter-spacing: 2px;????margin: 0 0 1em 0;???}???.m-read-content p{????text-indent: 2em;????margin: 0.5em 0;????letter-spacing: 0px;????line-height: 24px;???}???.u-tab{????height: 34px;????margin: 10px auto;????line-height: 34px;????border-radius: 8px;????border:1px solid #858382;????font-size: 12px;????background: #000;????opacity: 0.9;???}???.u-tab span{????display:inline-block;????width: 49%;????border-right: 1px solid #858382;????text-align: center;????color: #fff;???????}???.u-tab span:nth-child(2){????border-right: none;???}???.m-button-bar{????width:70%;????max-width: 800px;????padding: 5px;????margin: 0px auto;????}???.top-nav{????position:fixed;????top: 0px;????height: 50px;????width: 100%;????z-index: 9999;????background: #000;???}???.icon-back{????position: absolute;????top: 14px;????left: 10px;????width:13.3px;????height: 24.8px;????background: url(img/back.png);????background-size: contain;???}???.nav-title{????position:absolute;????top: 16px;????left: 42px;????color: #d5d5d6;???}???.bottom-nav{????position:fixed;????bottom: 0px;????height: 70px;????width: 100%;????z-index: 9999;????color: #d5d5d6;?????font-size: 12px;????font-weight: bold;????display: flex;????justify-content: center;???}???.backg{????position: fixed;????z-index: -999;????width: 100%;????height: 70px;????background-color: #000;????opacity: 0.9;???????????}???.bottom-nav>nav{????width:85%;????display: flex;????align-items: center;????justify-content: space-around;???}???.bottom-nav>nav>div>img{????height:18px;???}???.bottom-nav>nav>div{????display:flex;????flex-direction: column;????height: 70%;????justify-content: space-around;????cursor: pointer;???????}??????????</style>??<title>書城首頁(yè)</title>?</head>?<body>??<div id="root" class="container">???? <div id="top-nav" class="top-nav">????? <div class="icon-back"></div>????? <div class="nav-title">返回書架</div>???? </div>???? <div id="fiction_chapter_title"></div>???? <div id="fiction_container" class="m-read-content">??????? <h4>雨中的了悟</h4>???? <p>?????????????? 如果雨之後還是雨 如果憂傷之後仍是憂傷 請(qǐng)讓我從容面對(duì)這別離之後的別離 微笑地繼續(xù)去尋找一個(gè)不可能再出現(xiàn)的 你???? </p>???? </p>???? </div>???? <div class="m-button-bar">???? <div class="u-tab"> ???????? <span id="prev_button">上一章</span><span id="next_button">下一章</span>???? </div>???? </div>???? <div id="bottom-nav" class="bottom-nav">???? <div class="backg"></div>???? <nav>????? <div class="content"><img src="img/tree.png" alt=""><span>目錄</span></div>????? <div class="content" id="content"><img id="font_size" src="img/font_size.png" alt=""><span>字體</span></div>?<div class="content" id="content1"><img id="night" src="img/night.png" alt=""><span>夜間</span></div>?????? </nav>? ???? </div>??</div>?????? <script src="js/zepto.js"></script>????? <script>???? window.jQuery =$;??</script>???? <script src="js/jquery.base64.js"></script>???? <script src="js/jquery.jsonp.js"></script>???<script>???var con=document.getElementById("content");???var fon=document.getElementById("font_size");???var i=0;????? con.onclick=function(){?????? if(i%2==0){?????fon.src="img/font_size2.png";??????? i++;?????? }?????? else if(i%2==1){??????? fon.src="img/font_size.png"??????? i++;?????? }????? }???var con1=document.getElementById("content1");???var nig=document.getElementById("night");???var i=0;????? con.onclick=function(){?????? if(i%2==0){?????fon.src="img/day.png";??????? i++;?????? }?????? else if(i%2==1){??????? fon.src="img/font_size.png"??????? i++;?????? }????? }????????</script>?</body>??</html>
底邊欄的字體對(duì)應(yīng)的圖片有點(diǎn)擊事件，其切換圖片只要用手機(jī)模擬就無效（頂部為我所用的圖片）
慕瓜9363615
2017-11-24 14:27:45