適老化demo
--------------------------------------------------------html------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=1000,initial-scale=1">
<title></title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/whye.css">
<script src="js/setting.js"></script>
</head>
<body id='asodcmoemg'>
<a href="1231231">klsdklf <br /> <i style="font-size: 12px"> </i>alksdjflk</a>
<div id='asd2'><a href="1231231">klsdklf <br /> alksdjflk</a></div>
<a href="javascript:;" id="whyeAction">打開適老模式</a><br />
<script>
setTimeout(()=>{
$("#asd2").prepend('<span>54444444444</span>')
$("#asd2").prepend('<span>54444444444</span>')
$("#asd2").prepend('<span>54444444444</span>')
$("#asd2").prepend('<span>54444444444</span>')
$("#asd2").prepend('<span>54444444444</span>')
$("#asd2").prepend('<span>54444444444</span>')
$("#asd2").prepend('<span>54444444444</span>')
},3000)
</script>
</body>
</html>
------------------------------------------------------css---------------------------------------------------------
@font-face {
font-family: 'whyetool';
src: url('./whyetool.eot?gp65se');
src: url('./whyetool.eot?gp65se#iefix') format('embedded-opentype'), url('./whyetool.ttf?gp65se') format('truetype'), url('./whyetool.woff?gp65se') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
#whyeAdaptive [class^="icor-"],
#whyeAdaptive [class*=" icor-"] {
font-family: 'whyetool' !important;
speak: never;
font-size: 40px;
border-radius: 5px;
background-color: #005fb1;
color: #fff;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#whyeAdaptive [class*=" icor-"]:hover {
cursor: pointer !important;
background-color: #ff0000 !important;
color: #fff !important;
}
#whyeAdaptive [class^="icor-"]:hover {
cursor: pointer !important;
background-color: #ff0000 !important;
color: #fff !important;
}
#whyeAdaptive .icor-home:before {
content: "\e900";
}
#whyeAdaptive .icor-help:before {
content: "\e901";
}
#whyeAdaptive .icor-refresh:before {
content: "\e902";
}
#whyeAdaptive .icor-ruler:before {
content: "\e903";
}
#whyeAdaptive .icor-text:before {
content: "\e904";
}
#whyeAdaptive .icor-cursor:before {
content: "\e905";
}
#whyeAdaptive .icor-bWord:before {
content: "\e906";
}
#whyeAdaptive .icor-sWord:before {
content: "\e907";
}
#whyeAdaptive .icor-color:before {
content: "\e908";
}
#whyeAdaptive .icor-switch-on:before {
content: "\e909";
}
#whyeAdaptive .icor-switch-off:before {
content: "\e90a";
}
#whyeAdaptive .icor-speed:before {
content: "\e90b";
}
#whyeAdaptive .icor-pRead:before {
content: "\e90c";
}
#whyeAdaptive .icor-lReadInit:before {
content: "\e90d";
}
#whyeAdaptive .icor-lReadStart:before {
content: "\e90e";
}
#whyeAdaptive .icor-lReadStop:before {
content: "\e90f";
}
#whyeAdaptive .icor-display:before {
content: "\e910";
}
#whyeAdaptive .icor-close:before {
content: "\e911";
}
#whyeAdaptive .icor-closed:before {
content: "\e912";
}
#whyeAdaptive .icor-zh:before {
content: "\e913";
}
#whyeAdaptive .icor-tw:before {
content: "\e914";
}
#whyeAdaptive .icor-py:before {
content: "\e915";
}
#whyeAdaptive .xxxx {
background-color: #ff0000 !important;
color: #fff !important;
}
.cursorcur * {
cursor: url('./cursor.cur'), auto !important;
}
*:not(#whyeyd):focus {
border: none !important;
outline: 2px solid #1676c8 !important;
-webkit-transition: all 0.2s ease-in-out !important;
transition: all 0.2s ease-in-out !important;
}
#whyeAdaptive .rrbay_body {
padding-top: 88px !important;
}
#whyeAdaptive #rrbay_whyetool {
background-color: #1676c8 !important;
padding-top: 0 !important;
margin-top: 0 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
position: fixed !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#whyeAdaptive .rrbay_item {
text-align: center !important;
line-height: normal !important;
padding: 10px 0 !important;
margin: 0 10px !important;
display: inline-block !important;
}
#whyeAdaptive .rrbay_item div{
font-size: 18px !important;
height: 23px !important;
margin-top: 5px !important;
font-weight: 600 !important;
color: #fff !important;
}
#whyeAdaptive #rrbay_ds {
width: 100% !important;
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
overflow: hidden !important;
}
#whyeAdaptive #rrbay_ds_tb {
width: 100% !important;
height: 145px !important;
font-weight: 700 !important;
border: 6px #1676c8 solid !important;
}
#whyeAdaptive #rrbay_ds_right {
background-color: #1676c8 !important;
}
#whyeAdaptive #rrbay_ds_tb2 {
border: none !important;
}
#whyeAdaptive #rrbay_ds_tb2 tr {
border: none !important;
}
#whyeAdaptive #rrbay_ds_right td {
border: none !important;
padding: 0px 0px !important;
background: #1676c8 !important;
}
#whyeAdaptive #rrbay_ds_marquee {
margin-top: 10px !important;
cursor: pointer !important;
color: #000 !important;
padding: 0px 0px !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
word-break: break-all !important;
}
#whyeAdaptive #rrbay_ds_marquee table,
#whyeAdaptive tr,
#whyeAdaptive td {
border: none !important;
}
#whyeAdaptive #rrbay_ds_close {
cursor: pointer !important;
}
.outline2pxSolidfff {
cursor: pointer !important;
outline: 2px solid #fff !important;
}
.outline2pxSolid000 {
cursor: pointer !important;
outline: 2px solid #000 !important;
}
.colorType1{
background-color: #000!important;
color:#fff!important;
}
.colorType2{
background-color: #fff!important;
color:#000!important;
}
-------------------------------------------------------js-----------------------------------------------------------
;$(function() {
var whye = document.createElement("div");
whye.id = 'whyeAdaptive';
whye.style = "position:relative;z-index: 9999990;"
whye.innerHTML =
`<div id="rrbay_whyetool"> <div style="float:left;text-align: center; line-height: normal; padding: 27px 0; margin: 0 60px 0 10px;display: inline-block !important;"> <p style="text-align:center;font-size:26px;line-height:normal;color:#fff;">歡迎使用適老模式</p> </div> <div id="id_home" class="rrbay_item" title="首頁"> <r class="icor-home"></r> <div>首頁</div> </div> <div id="id_cursor" class="rrbay_item" title="更換鼠標箭頭圖標"> <r class="icor-cursor"></r> <div>鼠標</div> </div> <div id="id_pRead" class="rrbay_item selected" title="指讀功能"> <r class="icor-pRead"></r> <div>指讀</div> </div> <div id="id_bWord" class="rrbay_item" title="放大頁面字體"> <r class="icor-bWord"></r> <div>大字</div> </div> <div id="id_sWord" class="rrbay_item" title="縮小頁面字體"> <r class="icor-sWord"></r> <div>小字</div> </div> <div id="id_color" class="rrbay_item" title="頁面配色功能"> <r class="icor-color"></r> <div>配色</div> </div> <div id="id_close" class="rrbay_item" title="退出適老模式"> <r class="icor-close"></r> <div>退出</div> </div></div><div> `;
let standby = parseInt($("body").css('marginTop')) + parseInt($("body").css('paddingTop'))
$("body").prepend(whye);
$("body").prepend('<div style="height:' + $("#rrbay_whyetool").height() + 'px"></div>');
const getNodeLast = function(nodes, attr = '') {
let arr = []
for (let i = 0; i < nodes.length; i++) {
if (fitlerLabel.indexOf(nodes[i].nodeName) >= 0) {
continue;
}
if (nodes[i].nodeName == 'A') {
attr = nodes[i].getAttributeNames().some((item) => item == 'href') ? 'link' : '';
}
if (nodes[i].childNodes.length) {
getNodeLast(nodes[i].childNodes, attr ? attr : '')
} else if (nodes[i].nodeName == '#text' || nodes[i].nodeName == 'BR' || nodes[i].nodeName ==
'HR') {
let whye;
if (nodes[i].nodeName == 'BR' || nodes[i].nodeName == 'HR') {
whye = nodes[i]
} else {
whye = document.createElement('whyeouter');
let str = $(nodes[i]).text();
let aArr = str.split('');
let size = Math.ceil(aArr.length / whyeAdaptivelength)
for (let i = 0; i < size; i++) {
let whyeSplit = document.createElement('whye');
whyeSplit.setAttribute('link', attr);
whyeSplit.innerHTML = (aArr.splice(0, whyeAdaptivelength).join(''))
whye.appendChild(whyeSplit)
}
}
arr.push({
index: i,
node: whye
})
}
}
for (let item of arr) {
nodes[0].parentNode.replaceChild(item.node, nodes[0].parentNode.childNodes[item.index]);
}
}
let time = [],
request = '';
let audio = document.createElement('audio');;
$('body').mousemove(function() {
let nodes = $(this)[0].childNodes;
getNodeLast(nodes)
});
$("body").on('mouseover mouseout', 'whye,img,.rrbay_item', function(event) {
if (event.type == 'mouseover') {
if (whyeaction && pread) {
if ($(this)[0].nodeName == 'WHYE')
$(this).addClass(colorType == 1 ? "outline2pxSolid000" : "outline2pxSolidfff")
let timeF = setTimeout(() => {
let text = $(this).attr('title') || $(this).text(),
link = $(this).attr("link");
if (link)
text = '鏈接!' + text;
if (text != '') {
audio.loop = false;
audio.autoplay = true;
audio.src =
requestUrl + '?text=' +
encodeURI(text)
audio.load();
}
}, timing)
time.push(timeF)
}
} else if (event.type == 'mouseout') {
if (whyeaction && pread) {
for (let i = 0; i < time.length; i++) {
clearTimeout(time[i])
}
time = [];
$(this).removeClass("outline2pxSolid000")
$(this).removeClass("outline2pxSolidfff")
audio.src = ''
audio.pause();
audio.remove();
if (request != '') {
request.abort();
request = ''
}
}
}
});
});
---------------------------------------------------js2---------------------------------------------------
;let zoom = 1,
requestUrl = 'http://172.16.20.23:8087/jeecg-boot/cms/cmsApiInfo/parsingFile',
colorType = 1,
whyeaction = 0,
pread = 1,
whyeAdaptivelength = 9999999999999,
fitlerLabel = ['WHYE', 'STYLE', 'SCRIPT'],
timing = 500;
$(function() {
$(document).on('click', '.rrbay_item', function() {
let type = ($(this).attr('id'));
switch (type) {
case 'id_cursor':
$(this).toggleClass('selected');
$("body").toggleClass('cursorcur');
break;
case 'id_home':
window.location.reload();
break;
case 'id_bWord':
if (zoom < 1.03) {
$('body *').css('zoom', zoom += .01)
}
break;
case 'id_sWord':
if (zoom > 1) {
$('body *').css('zoom', zoom -= .01)
}
break;
case 'id_color':
if (colorType == 1) {
$('body *').not("#whyeAdaptive *").removeClass('colorType1').addClass('colorType2')
} else if (colorType == 2) {
$('body *').not("#whyeAdaptive *").removeClass('colorType2').addClass('colorType1')
} else {
$('body *').not("#whyeAdaptive *").removeClass('colorType2');
$('body *').not("#whyeAdaptive *").removeClass('colorType1')
}
colorType++;
colorType = colorType == 3 ? 0 : colorType;
break;
case 'id_close':
$("#whyeAdaptiveScript").remove();
$("#whyeAdaptive").remove();
$('body *').not("#whyeAdaptive *").removeClass('colorType2');
$("body").removeClass('cursorcur');
$('body *').css('zoom', 1);
$('body *').not("#whyeAdaptive *").removeClass('colorType1');
window.location.reload();
whyeaction = 0;
break;
case 'id_pRead':
pread = pread == 1 ? 0 : 1;
$(this).toggleClass('selected');
console.log(pread);
break;
default:
break
}
})
whyeAction = function() {
if (whyeaction)
return false;
var hm = document.createElement("script");
hm.src = "js/whye2.js";
hm.id = "whyeAdaptiveScript";
whyeaction = 1;
$("head").append(hm)
}
$("#whyeAction").click(function() {
whyeAction()
})
})
浙公網安備 33010602011771號