526互联

适老化demo

发布时间 2023-08-18 09:46:10作者: mrt_yy

--------------------------------------------------------html------------------------------------------------------

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态</title>
<style>
* {
margin: 0;
padding: 0;
}

.video {
width: 200px;
height: auto;
margin: 0 auto;
}

#video {
width: 200px;
height: auto;
}
</style>
</head>
<body>
开启语音：点击网站无障碍工具条“语音”按钮即可开启语音辅助功能。也可以使用转换键[Shift]+数字键[6]开启和关闭语音辅助功能。
使用方法：使用鼠标悬停选择或键盘焦点选择即可听到语音朗读内容；使用键盘快捷键Alt+t进行定位标题。
残友是什么
它是一种生活方式： 感恩 奉献 自助 助人。

它是一次温柔革命： 弱势群体依托高科技强势就业。

它是一个民生工具： 就业一人 幸福一家 安定一方。

它是一个慈善平台： 公益远航的联合舰队。

它是一家社会企业： 以商业的方式 解决社会问题。

它是一位特殊经济参与者： 残疾人人力资源嵌入现代产业体系。

它是一串励志故事： 全世界残友团结起来 用自己的行动改变命运。

它是一方情义江湖： 不抛弃不忘记每一位兄弟姐妹和同行者。


这里是灵魂避风的港湾，这里是苦乐共享的家园；

这里燃烧着激情与梦想，这里充溢着执著与希望；

在这里，生命摒弃狭隘，慢慢成熟、完整。。。

在这里，我们手牵手、肩并肩，用信念铸就辉煌。
<div class="video">

<div class="img" dataurl='./test.mp3' style="background-color: #f00;"><img src="./img/demo.png" alt="" />1111</div>
<div class="img" dataurl='./test2.mp3' style="background-color: #f00;"><img src="./img/demo.png" alt="" />2222</div>
<audio id='audiomp3' autoplay controls></audio>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function() {
let audio = $('#audiomp3')[0];
$(".img").hover(function() {
audio.src=$(this).attr("dataurl")
audio.load();
}, function() {
audio.pause();
})
})
</script>

------------------------------------------------------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;
}

#whyeAdaptive .yyyy * {
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;
}

.outline2pxSolid000 {
cursor: pointer !important;
outline: 2px solid #000 !important;
border-radius: 2px !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_cursor" 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_switch" class="rrbay_item" title="声音开关功能"> <r class="icor-switch-on"></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_pRead" class="rrbay_item" title="指读功能"> <r class="icor-pRead"></r> <div>指读</div> </div> <div id="id_close" class="rrbay_item" title="退出适老模式"> <r class="icor-close"></r> <div>退出</div> </div></div><div> <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_cursor" 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_switch" class="rrbay_item" title="声音开关功能"> <r class="icor-switch-on"></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_pRead" class="rrbay_item" title="指读功能"> <r class="icor-pRead"></r> <div>指读</div> </div> <div id="id_close" class="rrbay_item" title="退出适老模式"> <r class="icor-close"></r> <div>退出</div> </div><div style="clear:both"></div> </div>`;
$("body").prepend(whye);
$('strong,ol,li,img,a,span,em,del,center,strong,label,b,dt,dd,h1,h2,h3,h4,h5,h6,p,div,span').each(
function() {
let nodes = $(this)[0].childNodes;
let arr = []
for (let i = 0; i < nodes.length; i++) {
if ((!nodes[i].childNodes.length && 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('whye');
whye.innerHTML = $.trim($(nodes[i]).text());
}
arr.push({
index:i,
node:whye
})
}
}
for(let item of arr){
$(this)[0].replaceChild(item.node, $(this)[0].childNodes[item.index]);
}
})

$('whye').hover(
function() {
console.log($(this).text())
$(this).addClass("outline2pxSolid000")
},
function() {
$(this).removeClass("outline2pxSolid000")
})
});