首页 - 文章 - 网页开发设计 - 正文

无障碍阅读湛江政府门户网站个性化服务

付涛纪实阁网页开发设计 2019年6月25日 百度已收录

64 0 0

昨天在逛网站的时候，无意间发现湛江政府门户网站于是出现了一个比较个性化的体验服务，于是花了几分钟把这个给整理了出来，方便有用的朋友使用；

以上效果执行起来共分为三个部分：

1、页面链接；

2、CSS样式文件；

3、JS特效文件；

开启辅助线后的效果

效果执行过程

网页前端页面代码：

<a class="last" onclick="javascript:openToolBar();" href="javascript:void(0);">无障碍阅读</a>
    <div id="container"><br><br><br>
湛江政府门户<a href="https://www.diebaosoft.com/tag/%e7%bd%91%e7%ab%99" title="【查看含有[网站]标签的文章】" target="_blank">网站</a>湛江政府门户网站湛江政府门户网站湛江政府门户网站
<div id="contr_wzh" class="contr_wzh" style="display: none;">
            <input class="textmodebutton" title="文字放大" onclick="fontSizeZoom('zoomIn')" type="button" value="文字放大" />
            <input class="textmodebutton" title="文字缩小" onclick="fontSizeZoom('zoomOut')" type="button" value="文字缩小" />
            <input class="textmodebutton" id="contrasbutton" title="高对比度" onclick="highContrast()" type="button" value="高对比度" />
            <input class="textmodebutton" id="guidesbutton" title="开启辅助线" onclick="guidesOpen()" type="button" value="开启辅助线" />
            <input class="textmodebutton" title="界面放大" onclick="pageZoom('zoomIn')" type="button" value="界面放大" />
            <input class="textmodebutton" title="界面缩小" onclick="pageZoom('zoomOut')" type="button" value="界面缩小" />
            <input class="textmodebutton" title="重置工具条" onclick="resetToolBar()" type="button" value="重置" />
            <input class="textmodebutton" title="关闭工具条" onclick="closeToolBar()" type="button" value="关闭" />
        </div>
        <div class="cont_x" id="guidesXLine" style="display: none; z-index: 99999999;"></div>
        <div class="cont_y" id="guidesYLine" style="display: none; z-index: 99999999;"></div>
        <!--文字缩放等工具-->

效果样式文件

将以下效果样式直接复制进自己网站的CSS样式即可：

.cont_x{position:absolute;left:0;top:0;background:#000cff;display:block;width:100%;height:3px;margin:0;padding:0;overflow:hidden}.cont_y{position:absolute;left:0;top:0;background:#000cff;display:block;width:3px;min-height:50000px;height:auto !important;height:50000px;overflow:visible}.contr_wzh{z-index:202;position:absolute;text-align:center;width:100%;background:#fff;top:0;left:0}.contr_wzh{z-index:202;position:absolute;text-align:center;width:100%;background:#fff;top:0;left:0}.textmodebutton{border-bottom:#c80000 1px solid;border-left:#c80000 1px solid;padding-bottom:0;line-height:16px;background-color:#fff;margin:5px 1px;padding-left:1px;width:100px;padding-right:1px;height:20px;color:#c80000;font-size:16px;border-top:#c80000 1px solid;font-weight:bold;border-right:#c80000 1px solid;padding-top:0;width:auto;display:inline-block}.cont_x{position:absolute;left:0;top:0;background:#000cff;display:block;width:100%;height:3px;margin:0;padding:0;overflow:hidden;z-index:99999999}.cont_y{position:absolute;left:0;top:0;background:#000cff;display:block;width:3px;min-height:5000px;z-index:99999999;height:auto !important;height:5000px;overflow:visible}