首页 > 其他分享 >适老化demo

适老化demo

时间：2023-08-18 09:48:58浏览次数：43  
标签：icor demo whyeAdaptive content important 老化 font before

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

标签：icor,demo,whyeAdaptive,content,important,老化,font,before
From： https://www.cnblogs.com/mrt-yyy/p/17639560.html

相关文章

  • excel 输出demo（outputstream 转inputstr）
    protectedvoidresponseExcel(HSSFWorkbookworkbook)throwsIOException{ByteArrayOutputStreamos=newByteArrayOutputStream();try{workbook.write(os);}catch(IOExceptione){e.printStackTrace();}byte[]content......
  • django乐观锁、悲观锁商品秒杀简单demo
    悲观锁总是假设最坏的情况，每次去拿数据的时候都认为别人会修改，所以每次在拿数据的时候都会上锁，这样别人想拿这个数据就会阻塞直到它拿到锁（共享资源每次只给一个线程使用，其它线程阻塞，用完后再把资源转让给其它线程）。传统的关系型数据库里边就用到了很多这种锁机制，比如行锁，表锁等，读......
  • seata学习-简单demo入门
    概述学习一个框架，我喜欢从demo中了解该框架所能达到的效果再进行深入地学习。本篇文章将会介绍seata的一个入门使用demo,作为使用seata的入门学习文章。使用案例首先到github中下载一个RM的运行服务，本例中使用的是：https://github.com/seata/seata/releases/download......
  • Mybatis配置文件的空白模板和联系demo所用到的依赖
    核心配置文件模板<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUBLIC"-//mybatis.org//DTDConfig3.0//EN""https://mybatis.org/dtd/mybatis-3-config.dtd"><configuration><envir......
  • Pomelo官方demo ChatofPomelo简析之一——用户登录
    Pomelo官方demoChatofPomelo简析之一——用户登录 官方给的tutorial真是简单明了，简的刚开始学pomelo，压根就不知道代码写在哪。所以还是自己研究研究。首先看服务器端，处理逻辑的主要在game-server/app/servers下。有chat、connector和gate三种类型的服务器。connector：frontend前......
  • Aidlux demo演示
    aidluxdemo展示：人脸关键点检测演示点击例子，点击runnow运行即可，效果如下，我就不露脸了手势识别效果还不错，fps也不低......
  • JSON WEB TOKEN - 简单的token认证方式 - 告别session和cookie - Java Demo
    JWT简介jwt非常适合前后分离和分布式的应用不必在服务端存储session,本地也不用存储cookie直接存两段信息即可localStorage["jwt"]=jwt;//tokenlocalStorage["name"]=json.name;//token中加密的某个字段,用于后期请求带上校验token是否被改可以把认证......
  • 微服务实战demo(1.5.17.RELEASE&Edgware.SR5)
    一、注册中心（使用eureka）1.依赖：<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-eureka-server</artifactId></dependency><dependency><groupId>org.springfra......
  • pyspark小demo2
    ##py_pyspark_demo2.py#py_learn##CreatedbyZ.Steveon2023/8/1310:55.#importjson#1.导入库frompysparkimportSparkConf,SparkContext#2.创建SparkConf和SparkContext对象conf=SparkConf().setMaster("local[*]").setAppName(&q......
  • zookeeper_demo
    参考：全网最详细的zookeeper实战教程，看完你就知道有多值-知乎(zhihu.com)ZooKeeper入门，看这篇就够了！-知乎(zhihu.com)windows安装zk：windows环境下安装zookeeper教程详解（单机版）_风轩雨墨的博客-CSDN博客 zk的watch机制：Zookeeper——Watch机制原理_zookeeperwatch机制_庄......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99