html5--文字高亮顯示
阿新 • • 發佈：2019-01-10
程式碼實現：
1.建立demo.css
/*** Styles for the Fokus demo page.* * @author Hakim El Hattab | http://hakim.se*/ *{margin:0;padding:0;} ::selection{ background:#d1edf8;} html, body{height:100%;} body{background:#eee;font-family:華文行楷, Helvetica, sans-serif;font-size:16px;color:#222;} a{color:#c2575b;text-decoration:none;-webkit-transition:0.15s color ease;-moz-transition:0.15s color ease;-ms-transition:0.15s color ease; -o-transition:0.15s color ease;transition:0.15s color ease;} a:hover{color:#f76f76;} h1, h2{font-size:24px;} /* intro */ .intro{display:inline-block;background:#eee;padding:40px 60px;overflow-y:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .intro h1{position:relative;} .intro h1:after{content:'';position:absolute;display:inline-block;width:48px;height:48px;top:-9px;margin-left:7px;background-image:url( 'fokus48.png' );background-repeat:no-repeat;} .intro>article{width:400px;} .intro p{margin:10px 0 10px 0;font-size:16px;line-height:1.5em;} .intro small{display:block;margin-top:10px;padding-top:10px;color:#333;font-size:0.85em;border-top:1px dashed #ccc;-webkit-text-size-adjust:none;} .intro .sharing{margin-top:20px;}
2.建立fokus.min.js
/*! * Fokus 0.5 * http://lab.hakim.se/fokus * MIT licensed * * Copyright (C) 2012 Hakim El Hattab, http://hakim.se */ (function(){function u(){var m=s();l.clearRect(0,0,a.width,a.height);l.fillStyle="rgba( 0, 0, 0, "+d+" )";l.fillRect(0,0,a.width,a.height);m&&(0.1>d?b=h:(b.left+=0.18*(h.left-b.left),b.top+=0.18*(h.top-b.top),b.right+=0.18*(h.right-b.right),b.bottom+=0.18*(h.bottom-b.bottom)));l.clearRect(b.left-window.scrollX-q,b.top-window.scrollY-q,b.right-b.left+2*q,b.bottom-b.top+2*q);d=m?d+0.08*(B-d):Math.max(0.85*d-0.02,0);cancelAnimationFrame(v);m||0<d?(a.parentNode||document.body.appendChild(a),v=requestAnimationFrame(u)): document.body.removeChild(a)}function n(m){var a,e,k={left:Number.MAX_VALUE,top:Number.MAX_VALUE,right:0,bottom:0},g;a:{if(window.getSelection&&(g=window.getSelection(),!g.isCollapsed)){g=g.getRangeAt(0);var c=g.startContainer,r=g.endContainer;if(c==r)g="#text"===c.nodeName?[c.parentNode]:[c];else{for(var f=[];c&&c!=r;)f.push(c=C(c));for(c=g.startContainer;c&&c!=g.commonAncestorContainer;)f.unshift(c),c=c.parentNode;g=f}break a}g=[]}c=0;for(r=g.length;c<r;c++){f=g[c];"#text"===f.nodeName&&f.nodeValue.trim()&& (f=f.parentNode);a=f;e=document.documentElement.offsetLeft;var d=document.documentElement.offsetTop;if(a.offsetParent){do e+=a.offsetLeft,d+=a.offsetTop;while(a=a.offsetParent)}a=e;e=d;d=a;a=e;e=f.offsetWidth;var l=f.offsetHeight;f&&("number"===typeof d&&"number"===typeof e&&(0<e||0<l)&&!f.nodeName.match(/^br$/gi))&&(k.left=Math.min(k.left,d),k.top=Math.min(k.top,a),k.right=Math.max(k.right,d+e),k.bottom=Math.max(k.bottom,a+l))}if(!t||"none"===t||p[t]||s())h=k;m&&(b=h);s()&&u()}function s(){return h.left< h.right&&h.top<h.bottom}function D(a){3!==a.which&&(document.addEventListener("mousemove",w,!1),document.addEventListener("mouseup",x,!1),n())}function w(a){n()}function x(a){document.removeEventListener("mousemove",w,!1);document.removeEventListener("mouseup",x,!1);setTimeout(n,1)}function y(a){p.alt=a.altKey||a.altGraphKey;p.ctrl=a.ctrlKey;p.shift=a.shiftKey;p.meta=a.metaKey;n()}function z(a){n(!0)}function A(b){a.width=window.innerWidth;a.height=window.innerHeight}function C(a){if(a.hasChildNodes())return a.firstChild; for(;a&&!a.nextSibling;)a=a.parentNode;return a?a.nextSibling:null}var q=5,B=0.75,t=null,a,l,d=0,v,h={left:0,top:0,right:0,bottom:0},b={left:0,top:0,right:0,bottom:0},p={ctrl:!1,shift:!1,alt:!1,cmd:!1};(function(){for(var a=0,b=["ms","moz","webkit","o"],e=0;e<b.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[b[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[e]+"CancelAnimationFrame"]||window[b[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame|| (window.requestAnimationFrame=function(b,e){var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),f=window.setTimeout(function(){b(c+d)},d);a=c+d;return f});window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)})})();"addEventListener"in document&&"pointerEvents"in document.body.style&&!window.__fokused&&(window.__fokused=!0,a=document.createElement("canvas"),l=a.getContext("2d"),a.style.position="fixed",a.style.left=0,a.style.top=0,a.style.zIndex=2147483647,a.style.pointerEvents= "none",a.style.background="transparent",document.addEventListener("mousedown",D,!1),document.addEventListener("keyup",y,!1),document.addEventListener("keydown",y,!1),document.addEventListener("scroll",z,!1),document.addEventListener("DOMMouseScroll",z,!1),window.addEventListener("resize",A,!1),A())})();
3.建立index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>個人簡歷</title> <meta name="viewport" content="width=800, user-scalable=no"> <link rel="stylesheet" href="demo.css" type="text/css" /> </head> <body> <style> p{ text-shadow: 5px 5px 5px green; font-family: 華文行楷; } </style> <div class="intro"> <table> <tr> <p>一般情況下，如果沒有特別說明，代理技術預設說的是正向代理技術。關於正向代理的概念如下： 正向代理(forward)是一個位於客戶端【使用者A】和原始伺服器(origin server)【伺服器B】之間的伺服器【代理伺服器Z】，為了從原始伺服器取得內容，使用者A向代理伺服器Z傳送一個請求並指定目標(伺服器B)，然後代理伺服器Z向伺服器B轉交請求並將獲得的內容返回給客戶端。客戶端必須要進行一些特別的設定才能使用正向代理。</p> <p>一般情況下，如果沒有特別說明，代理技術預設說的是正向代理技術。關於正向代理的概念如下： 正向代理(forward)是一個位於客戶端【使用者A】和原始伺服器(origin server)【伺服器B】之間的伺服器【代理伺服器Z】，為了從原始伺服器取得內容，使用者A向代理伺服器Z傳送一個請求並指定目標(伺服器B)，然後代理伺服器Z向伺服器B轉交請求並將獲得的內容返回給客戶端。客戶端必須要進行一些特別的設定才能使用正向代理。</p> </tr> </table> </div> <script src="fokus.min.js"></script> </body> </html>