利用前端基础制作html开关图标

我们先来看下效果图:(学习视频分享:html视频教程)html代码: 开关图标</</p> </div><!-- .single-excerpt --> <div class="entry-content"> <p class="news_Nrp1"> <p><p>我们先来看下效果图:</p> </p> <p>(学习视频分享:html视频教程)</p> <p>html代码:</p> <pre class="brush:html;toolbar:false"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>开关图标</title></head><body> <div> <div> <input type="checkbox" id="toggle-button" name="switch" οnclick="SwitchClick()" checked> <label for="toggle-button"> <span></span> <span class="text on">ON</span> <span class="text off">OFF</span> </label> </div> </div></body></html></pre> <p>css样式:</p> <pre class="brush:css;toolbar:false"><style type="text/css"> body { text-align: center } .SwitchIcon { margin: 200px auto; } #toggle-button { display: none; } .button-label { position: relative; display: inline-block; width: 80px; height: 30px; background-color: #ccc; box-shadow: #ccc 0px 0px 0px 2px; border-radius: 30px; overflow: hidden; } .circle { position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; } .button-label .text { line-height: 30px; font-size: 18px; text-shadow: 0 0 2px #ddd; } .on { color: #fff; display: none; text-indent: -45px; } .off { color: #fff; display: inline-block; text-indent: 34px; } .button-label .circle { left: 0; transition: all 0.3s; } #toggle-button:checked + label.button-label .circle { left: 50px; } #toggle-button:checked + label.button-label .on { display: inline-block; } #toggle-button:checked + label.button-label .off { display: none; } #toggle-button:checked + label.button-label { background-color: #19e236; } .div { height: 20px; width: 30px; background: #51ccee; } </style></pre> <p>js逻辑:</p> <pre class="brush:js;toolbar:false"><script type="text/javascript"> //窗体加载 window.onload = function () { var onoffswitch = document.getElementById("toggle-button"); onoffswitch.checked = true; } //测试开始 function SwitchClick() { var onoffswitch = document.getElementById("toggle-button"); var label = document.getElementById("batteryIconContent"); if (onoffswitch.checked) { //调用后台 } else { //调用后台 } } </script></pre></p> </div><!-- .entry-content --> <div class="entry-footer clear"> <div class="entry-tags"> <span class="tag-links"><span>文章标签:</span> <a href="https://news.lhlymp.com/tag/%e5%90%8e%e5%8f%b0" rel="tag">后台</a> <a href="https://news.lhlymp.com/tag/%e6%95%88%e6%9e%9c%e5%9b%be" rel="tag">效果图</a> <a href="https://news.lhlymp.com/tag/%e7%aa%97%e4%bd%93" rel="tag">窗体</a> <a href="https://news.lhlymp.com/tag/%e8%a7%86%e9%a2%91%e6%95%99%e7%a8%8b" rel="tag">视频教程</a></span> </div><!-- .entry-tags --> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content clear"> <h3>给这篇文章的作者打赏</h3> <div class="ht_grid_1_2_custom"> <img src="" alt="微信扫一扫打赏"/> 微信扫一扫打赏 </div> <div class="ht_grid_1_2_custom"> <img src="" alt="微信扫一扫打赏"/> 支付宝扫一扫打赏 </div> <span class="close">×</span> </div> </div> <div class="entry-footer-right"> <span class="entry-like"> <span class="sl-wrapper"><a href="https://news.lhlymp.com/wp-admin/admin-ajax.php?action=process_simple_like&post_id=3004&nonce=6d5878f626&is_comment=0&disabled=true" class="sl-button sl-button-3004" data-nonce="6d5878f626" data-post-id="3004" data-iscomment="0" title="点赞这篇文章"><span class="sl-count">0 <em>赞</em></span></a><span class="sl-loader"></span></span> </span><!-- .entry-like --> <span class="entry-sponsor"> <span id="myBtn" href="#">打赏</span> </span> </div> </div><!-- .entry-footer --> </article><!-- #post-## --> <div class="author-box clear"> <a href="https://news.lhlymp.com/author"><img alt='' src='https://gravatar.wpfast.org/avatar/?s=120&d=mm&r=g' srcset='https://gravatar.wpfast.org/avatar/?s=240&d=mm&r=g 2x' class='avatar avatar-120 photo avatar-default' height='120' width='120' /></a> <div class="author-meta"> <h4 class="author-name">关于作者: <span class="hover-underline"><a href="https://news.lhlymp.com/author">营销实力派</a></span></h4> <div class="author-desc"> </div> </div> </div><!-- .author-box --> <div class="entry-related clear"> <h3>为您推荐</h3> <div class="related-loop clear"> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://news.lhlymp.com/tuiguang/10318.html"> <div class="thumbnail-wrap"> <img src="https://news.lhlymp.com/wp-content/themes/zimeiti-1/thumb.php?src=https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/img/default.png&w=280&h=176" alt="javascript中两种定时器有什么区别"/> </div><!-- .thumbnail-wrap --> </a> <h2 class="entry-title"><a href="https://news.lhlymp.com/tuiguang/10318.html">javascript中两种定时器有什么区别</a></h2> </div><!-- .grid --> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://news.lhlymp.com/tuiguang/10317.html"> <div class="thumbnail-wrap"> <img src="https://news.lhlymp.com/wp-content/themes/zimeiti-1/thumb.php?src=https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/img/default.png&w=280&h=176" alt="​mac 怎么安装 node.js"/> </div><!-- .thumbnail-wrap --> </a> <h2 class="entry-title"><a href="https://news.lhlymp.com/tuiguang/10317.html">​mac 怎么安装 node.js</a></h2> </div><!-- .grid --> <div class="hentry ht_grid_1_3 last"> <a class="thumbnail-link" href="https://news.lhlymp.com/tuiguang/10316.html"> <div class="thumbnail-wrap"> <img src="https://news.lhlymp.com/wp-content/themes/zimeiti-1/thumb.php?src=https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/img/default.png&w=280&h=176" alt="eclipse 怎么安装node.js"/> </div><!-- .thumbnail-wrap --> </a> <h2 class="entry-title"><a href="https://news.lhlymp.com/tuiguang/10316.html">eclipse 怎么安装node.js</a></h2> </div><!-- .grid --> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://news.lhlymp.com/tuiguang/10315.html"> <div class="thumbnail-wrap"> <img src="https://news.lhlymp.com/wp-content/themes/zimeiti-1/thumb.php?src=https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/img/default.png&w=280&h=176" alt="css文字上的横线怎么写"/> </div><!-- .thumbnail-wrap --> </a> <h2 class="entry-title"><a href="https://news.lhlymp.com/tuiguang/10315.html">css文字上的横线怎么写</a></h2> </div><!-- .grid --> <div class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="https://news.lhlymp.com/tuiguang/10314.html"> <div class="thumbnail-wrap"> <img src="https://news.lhlymp.com/wp-content/themes/zimeiti-1/thumb.php?src=https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/img/default.png&w=280&h=176" alt="javascript怎么判断值是否在数组中"/> </div><!-- .thumbnail-wrap --> </a> <h2 class="entry-title"><a href="https://news.lhlymp.com/tuiguang/10314.html">javascript怎么判断值是否在数组中</a></h2> </div><!-- .grid --> <div class="hentry ht_grid_1_3 last"> <a class="thumbnail-link" href="https://news.lhlymp.com/tuiguang/10313.html"> <div class="thumbnail-wrap"> <img src="https://news.lhlymp.com/wp-content/themes/zimeiti-1/thumb.php?src=https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/img/default.png&w=280&h=176" alt="node gyp是干什么的"/> </div><!-- .thumbnail-wrap --> </a> <h2 class="entry-title"><a href="https://news.lhlymp.com/tuiguang/10313.html">node gyp是干什么的</a></h2> </div><!-- .grid --> </div><!-- .related-posts --> </div><!-- .entry-related --> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/tuiguang/3004.html#respond" style="display:none;">取消回复</a></small></h3><form action="https://news.lhlymp.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">您的电子邮箱地址不会被公开。</span> 必填项已用<span class="required">*</span>标注</p><p class="comment-form-comment"><label for="comment">评论</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">显示名称 <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">电子邮箱地址 <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">网站地址</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">在此浏览器中保存我的显示名称、邮箱地址和网站地址,以便下次评论时使用。</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="发表评论" /> <input type='hidden' name='comment_post_ID' value='3004' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- .right-col --> </div><!-- #primary --> <aside id="secondary" class="widget-area sidebar"> <div id="happythemes-ad-7" class="widget widget_ad ad-widget"></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">标签</h2><div class="tagcloud"><a href="https://news.lhlymp.com/tag/ocpc" class="tag-cloud-link tag-link-2693 tag-link-position-1" style="font-size: 10.752136752137pt;" aria-label="ocpc (63个项目)">ocpc</a> <a href="https://news.lhlymp.com/tag/sem" class="tag-cloud-link tag-link-1681 tag-link-position-2" style="font-size: 19.128205128205pt;" aria-label="SEM (323个项目)">SEM</a> <a href="https://news.lhlymp.com/tag/sem%e5%9f%b9%e8%ae%ad" class="tag-cloud-link tag-link-2739 tag-link-position-3" style="font-size: 15.299145299145pt;" aria-label="SEM培训 (153个项目)">SEM培训</a> <a href="https://news.lhlymp.com/tag/sem%e5%ad%a6%e4%b9%a0" class="tag-cloud-link tag-link-2740 tag-link-position-4" style="font-size: 14.222222222222pt;" aria-label="SEM学习 (126个项目)">SEM学习</a> <a href="https://news.lhlymp.com/tag/sem%e6%95%99%e7%a8%8b" class="tag-cloud-link tag-link-3050 tag-link-position-5" style="font-size: 8.3589743589744pt;" aria-label="sem教程 (40个项目)">sem教程</a> <a href="https://news.lhlymp.com/tag/sem%e7%99%be%e5%ba%a6%e7%ab%9e%e4%bb%b7" class="tag-cloud-link tag-link-2700 tag-link-position-6" style="font-size: 12.666666666667pt;" aria-label="Sem百度竞价 (92个项目)">Sem百度竞价</a> <a href="https://news.lhlymp.com/tag/sem%e7%ab%9e%e4%bb%b7" class="tag-cloud-link tag-link-3111 tag-link-position-7" style="font-size: 15.65811965812pt;" aria-label="sem竞价 (164个项目)">sem竞价</a> <a href="https://news.lhlymp.com/tag/%e4%b9%b1%e7%a0%81" class="tag-cloud-link tag-link-1909 tag-link-position-8" style="font-size: 8.1196581196581pt;" aria-label="乱码 (38个项目)">乱码</a> <a href="https://news.lhlymp.com/tag/%e4%bb%a3%e7%a0%81" class="tag-cloud-link tag-link-439 tag-link-position-9" style="font-size: 10.991452991453pt;" aria-label="代码 (67个项目)">代码</a> <a href="https://news.lhlymp.com/tag/%e5%85%83%e7%b4%a0" class="tag-cloud-link tag-link-632 tag-link-position-10" style="font-size: 17.333333333333pt;" aria-label="元素 (226个项目)">元素</a> <a href="https://news.lhlymp.com/tag/%e5%85%ac%e5%8f%b8" class="tag-cloud-link tag-link-255 tag-link-position-11" style="font-size: 9.4358974358974pt;" aria-label="公司 (49个项目)">公司</a> <a href="https://news.lhlymp.com/tag/%e5%85%b3%e9%94%ae%e8%af%8d" class="tag-cloud-link tag-link-651 tag-link-position-12" style="font-size: 10.512820512821pt;" aria-label="关键词 (60个项目)">关键词</a> <a href="https://news.lhlymp.com/tag/%e5%86%85%e5%ae%b9" class="tag-cloud-link tag-link-450 tag-link-position-13" style="font-size: 10.632478632479pt;" aria-label="内容 (62个项目)">内容</a> <a href="https://news.lhlymp.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-420 tag-link-position-14" style="font-size: 13.623931623932pt;" aria-label="函数 (111个项目)">函数</a> <a href="https://news.lhlymp.com/tag/%e5%8e%9a%e6%98%8c%e5%ad%a6%e9%99%a2" class="tag-cloud-link tag-link-3412 tag-link-position-15" style="font-size: 15.418803418803pt;" aria-label="厚昌学院 (158个项目)">厚昌学院</a> <a href="https://news.lhlymp.com/tag/%e5%91%bd%e4%bb%a4" class="tag-cloud-link tag-link-448 tag-link-position-16" style="font-size: 11.111111111111pt;" aria-label="命令 (68个项目)">命令</a> <a href="https://news.lhlymp.com/tag/%e5%ad%97%e7%ac%a6%e4%b8%b2" class="tag-cloud-link tag-link-1919 tag-link-position-17" style="font-size: 9.5555555555556pt;" aria-label="字符串 (50个项目)">字符串</a> <a href="https://news.lhlymp.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-1926 tag-link-position-18" style="font-size: 17.094017094017pt;" aria-label="属性 (220个项目)">属性</a> <a href="https://news.lhlymp.com/tag/%e6%90%9c%e7%b4%a2%e6%8e%a8%e5%b9%bf" class="tag-cloud-link tag-link-2717 tag-link-position-19" style="font-size: 9.6752136752137pt;" aria-label="搜索推广 (51个项目)">搜索推广</a> <a href="https://news.lhlymp.com/tag/%e6%95%b0%e6%8d%ae" class="tag-cloud-link tag-link-455 tag-link-position-20" style="font-size: 11.350427350427pt;" aria-label="数据 (72个项目)">数据</a> <a href="https://news.lhlymp.com/tag/%e6%95%b0%e7%bb%84" class="tag-cloud-link tag-link-2160 tag-link-position-21" style="font-size: 8.1196581196581pt;" aria-label="数组 (38个项目)">数组</a> <a href="https://news.lhlymp.com/tag/%e6%96%87%e4%bb%b6" class="tag-cloud-link tag-link-269 tag-link-position-22" style="font-size: 14.102564102564pt;" aria-label="文件 (122个项目)">文件</a> <a href="https://news.lhlymp.com/tag/%e6%96%b9%e6%b3%95" class="tag-cloud-link tag-link-1954 tag-link-position-23" style="font-size: 14.700854700855pt;" aria-label="方法 (138个项目)">方法</a> <a href="https://news.lhlymp.com/tag/%e6%a0%87%e7%ad%be" class="tag-cloud-link tag-link-1904 tag-link-position-24" style="font-size: 11.709401709402pt;" aria-label="标签 (77个项目)">标签</a> <a href="https://news.lhlymp.com/tag/%e6%a0%b7%e5%bc%8f" class="tag-cloud-link tag-link-1864 tag-link-position-25" style="font-size: 10.512820512821pt;" aria-label="样式 (61个项目)">样式</a> <a href="https://news.lhlymp.com/tag/%e7%94%a8%e6%88%b7" class="tag-cloud-link tag-link-130 tag-link-position-26" style="font-size: 11.589743589744pt;" aria-label="用户 (74个项目)">用户</a> <a href="https://news.lhlymp.com/tag/%e7%99%be%e5%ba%a6%e7%ab%9e%e4%bb%b7" class="tag-cloud-link tag-link-2698 tag-link-position-27" style="font-size: 18.051282051282pt;" aria-label="百度竞价 (261个项目)">百度竞价</a> <a href="https://news.lhlymp.com/tag/%e7%99%be%e5%ba%a6%e7%ab%9e%e4%bb%b7%e6%8e%a8%e5%b9%bf" class="tag-cloud-link tag-link-2781 tag-link-position-28" style="font-size: 11.230769230769pt;" aria-label="百度竞价推广 (69个项目)">百度竞价推广</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7" class="tag-cloud-link tag-link-1517 tag-link-position-29" style="font-size: 9.9145299145299pt;" aria-label="竞价 (54个项目)">竞价</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e5%91%98" class="tag-cloud-link tag-link-3164 tag-link-position-30" style="font-size: 11.230769230769pt;" aria-label="竞价员 (69个项目)">竞价员</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e5%9f%b9%e8%ae%ad" class="tag-cloud-link tag-link-2711 tag-link-position-31" style="font-size: 16.854700854701pt;" aria-label="竞价培训 (206个项目)">竞价培训</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e5%9f%b9%e8%ae%ad%e8%af%be%e7%a8%8b" class="tag-cloud-link tag-link-2719 tag-link-position-32" style="font-size: 8pt;" aria-label="竞价培训课程 (37个项目)">竞价培训课程</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e5%ad%a6%e4%b9%a0" class="tag-cloud-link tag-link-3239 tag-link-position-33" style="font-size: 13.504273504274pt;" aria-label="竞价学习 (108个项目)">竞价学习</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e5%b9%b2%e8%b4%a7" class="tag-cloud-link tag-link-3329 tag-link-position-34" style="font-size: 11.82905982906pt;" aria-label="竞价干货 (79个项目)">竞价干货</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e6%8e%a8%e5%b9%bf" class="tag-cloud-link tag-link-2696 tag-link-position-35" style="font-size: 22pt;" aria-label="竞价推广 (567个项目)">竞价推广</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e6%8e%a8%e5%b9%bf%e5%9f%b9%e8%ae%ad" class="tag-cloud-link tag-link-2866 tag-link-position-36" style="font-size: 8.7179487179487pt;" aria-label="竞价推广培训 (43个项目)">竞价推广培训</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e6%8e%a8%e5%b9%bf%e5%ad%a6%e4%b9%a0" class="tag-cloud-link tag-link-3258 tag-link-position-37" style="font-size: 9.0769230769231pt;" aria-label="竞价推广学习 (46个项目)">竞价推广学习</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e6%95%99%e7%a8%8b" class="tag-cloud-link tag-link-2704 tag-link-position-38" style="font-size: 10.512820512821pt;" aria-label="竞价教程 (61个项目)">竞价教程</a> <a href="https://news.lhlymp.com/tag/%e7%ab%9e%e4%bb%b7%e8%af%be%e7%a8%8b" class="tag-cloud-link tag-link-2712 tag-link-position-39" style="font-size: 12.905982905983pt;" aria-label="竞价课程 (97个项目)">竞价课程</a> <a href="https://news.lhlymp.com/tag/%e7%bd%91%e7%ab%99" class="tag-cloud-link tag-link-553 tag-link-position-40" style="font-size: 16.495726495726pt;" aria-label="网站 (192个项目)">网站</a> <a href="https://news.lhlymp.com/tag/%e8%87%aa%e5%b7%b1%e7%9a%84" class="tag-cloud-link tag-link-434 tag-link-position-41" style="font-size: 8.5982905982906pt;" aria-label="自己的 (42个项目)">自己的</a> <a href="https://news.lhlymp.com/tag/%e8%af%ad%e5%8f%a5" class="tag-cloud-link tag-link-1891 tag-link-position-42" style="font-size: 8pt;" aria-label="语句 (37个项目)">语句</a> <a href="https://news.lhlymp.com/tag/%e8%b4%a6%e6%88%b7%e4%bc%98%e5%8c%96" class="tag-cloud-link tag-link-2950 tag-link-position-43" style="font-size: 9.3162393162393pt;" aria-label="账户优化 (48个项目)">账户优化</a> <a href="https://news.lhlymp.com/tag/%e8%b5%b5%e9%98%b3%e7%ab%9e%e4%bb%b7%e5%9f%b9%e8%ae%ad" class="tag-cloud-link tag-link-3417 tag-link-position-44" style="font-size: 11.709401709402pt;" aria-label="赵阳竞价培训 (77个项目)">赵阳竞价培训</a> <a href="https://news.lhlymp.com/tag/%e9%a1%b5%e9%9d%a2" class="tag-cloud-link tag-link-401 tag-link-position-45" style="font-size: 10.871794871795pt;" aria-label="页面 (65个项目)">页面</a></div> </div><div id="happythemes-ad-5" class="widget widget_ad ad-widget"></div><div id="happythemes-ad-6" class="widget widget_ad ad-widget"></div></aside><!-- #secondary --> </div><!-- #content .site-content --> <footer id="colophon" class="site-footer "> <div class="footer-columns footer-container clear"> <div class="footer-column footer-column-1 ht_grid_1_4"> <div id="custom_html-2" class="widget_text widget footer-widget widget_custom_html"><div class="textwidget custom-html-widget"></div></div><div id="text-2" class="widget footer-widget widget_text"> <div class="textwidget"></div> </div> </div> <div class="footer-column footer-column-2 ht_grid_1_4"> </div> <div class="footer-column footer-column-3 ht_grid_1_4"> </div> <div class="footer-column footer-column-4 ht_grid_1_4"> </div> </div><!-- .footer-columns --> <div class="clear"></div> <div id="site-bottom" class="clear"> <div class="container"> <div class="menu-%e5%ba%95%e9%83%a8%e5%af%bc%e8%88%aa-container"><ul id="footer-menu" class="footer-nav"><li id="menu-item-2095" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-2095"><a href="https://news.lhlymp.com/category/tuiguang">推广</a></li> <li id="menu-item-2096" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2096"><a href="https://news.lhlymp.com/category/yingxiao">营销</a></li> <li id="menu-item-2097" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2097"><a href="https://news.lhlymp.com/category/sem">SEM</a></li> <li id="menu-item-2098" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2098"><a href="https://news.lhlymp.com/category/seo">SEO</a></li> <li id="menu-item-2093" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2093"><a href="https://www.lhlymp.com/">绿优下载站</a></li> <li id="menu-item-2094" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2094"><a href="https://m.lhlymp.com/">绿优手机站</a></li> <li id="menu-item-2103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2103"><a href="https://www.lhlymp.com/app/">手机软件</a></li> <li id="menu-item-2104" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2104"><a href="https://m.lhlymp.com/app/">手机APP</a></li> <li id="menu-item-2105" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2105"><a href="https://www.xiangjiaohao.com/">香蕉号</a></li> <li id="menu-item-2106" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2106"><a href="https://www.wuyahao.com/">乌鸦号</a></li> </ul></div> <div class="site-info"> © 2021 <a href="https://news.lhlymp.com">绿优营销网</a> - SEOer的自留地 </div><!-- .site-info --> </div><!-- .container --> </div> <!-- #site-bottom --> </footer><!-- #colophon --> </div><!-- #page --> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/superfish.js?ver=5.8.4' id='superfish-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/jquery.slicknav.js?ver=5.8.4' id='slicknav-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/modernizr.js?ver=5.8.4' id='modernizr-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/html5.js?ver=5.8.4' id='html5-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/jquery.bxslider.js?ver=5.8.4' id='bxslider-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/qrcode.js?ver=5.8.4' id='qrcode-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/social-share.js?ver=5.8.4' id='social-share-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/infinite-scroll.pkgd.min.js?ver=5.8.4' id='infinite-scroll-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/jquery.sticky.js?ver=5.8.4' id='sticky-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-content/themes/zimeiti-1/assets/js/jquery.custom.js?ver=20180916' id='zimeiti-1-custom-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-includes/js/comment-reply.min.js?ver=5.8.4' id='comment-reply-js'></script> <script type='text/javascript' src='https://news.lhlymp.com/wp-includes/js/wp-embed.min.js?ver=5.8.4' id='wp-embed-js'></script> <div id="back-top"> <a href="#top" title="返回顶部"><span class="genericon genericon-collapse"></span></a> </div> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; /*-----------------------------------------------------------------------------------*/ /* Sticky Breadcrumbs /*-----------------------------------------------------------------------------------*/ $(window).scroll(function(){ var aTop = 200; if( ( $(this).scrollTop()>=aTop) ){ $('.single .site-main .entry-header').addClass('sticky-breadcrumbs'); $('.single #primary article.hentry').css('padding-top', '110px'); $('#single-sticky').addClass(' container'); $('.single .left-col').addClass('header-scrolled'); } else { $('.single .site-main .entry-header').removeClass('sticky-breadcrumbs'); $('.single #primary article.hentry').css('padding-top', '0'); $('#single-sticky').removeClass(' container'); $('.single .left-col').removeClass('header-scrolled'); } }); /*-----------------------------------------------------------------------------------*/ /* Sticky Left Navigation /*-----------------------------------------------------------------------------------*/ $(".left-col").sticky( { topSpacing: 0 } ); /*-----------------------------------------------------------------------------------*/ /* Slick Mobile Menu /*-----------------------------------------------------------------------------------*/ $('#primary-menu').slicknav({ prependTo: '#slick-mobile-menu', allowParentLinks: true, label: '导航' }); }); })(jQuery); </script> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>