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

天涯海角搜一下: 百度 谷歌 360 搜狗 搜搜 奇虎 雅虎 [百度已收录]
  • A+
所属分类:网页开发设计

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

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

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

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>湛江政府门户<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}

JS特效文件下载

版权声明:本站原创文章,于2019年6月25日09:05:55,由 发表,共 2577 字。

转载请注明:来源于【付涛纪实阁】,文章链接:https://www.diebaosoft.com/8968.html

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 感恩老板
  • 老板越大方越能赚大钱
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: