网页开发设计

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

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

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

1、页面链接;

2、CSS样式文件;

3、JS特效文件;

开启辅助线后的效果

效果执行过程

网页前端页面代码:

<a class="last" onclick="javascript:openToolBar();" href="javascript:void(0);">无障碍阅读</a>
    <div id="container"><br><br><br>
湛江政府门户网站湛江政府门户网站湛江政府门户网站湛江政府门户网站
<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特效文件下载

特效JS文件

(0)
关键词:
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;
LensNews

发表评论