前端小案例汇总（附上原码）

日期：2020-05-11 浏览：108 评论：0

核心提示：一.交叉动画效果交...前端</div><div id="content"><div class="content" id="article"><h2>一.交叉动画效果</h2> <img src="/file/upload/2020/5/nyaQnu.gif" class="aligncenter"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>交叉动画实现</title> <style> * { margin: 0; padding: 0; list-style: none; } .wrapper { background-color: #222; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .dot { width: 2em; height: 2em; margin: 1em; border-radius: 50%; background-color: red; position: relative; } .dot::before { width: 100%; height: 100%; position: absolute; background-color: inherit; border-radius: inherit; content: ""; animation: wave 2s ease-out infinite; } @keyframes wave { 50% { transform: scale(2.5); } 100% { opacity: 0; } } </style> </head> <body> <div class="wrapper"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { var $dot=$(".dot"); for(var i=0;i<$dot.length;i++) { $(`.dot:nth-of-type(${i+1})`).css({ "background-color":`rgb(${random(0,255)},${random(0,255)},${random(0,255)})` }) // $(`.dot:nth-of-type(${i+1})::before`).css({ // "animation-delay":i*0.2+"s" // }) $("head").append( `<style> .dot:nth-of-type(${i+1})::before { animation-delay:${i*0.2}s } </style>` ) } }) function random(min,max) { return Math.floor(Math.random()*(max-min)+min) } </script> </body> </html> </code></pre> <h2>二.闪光按钮</h2> <img src="/file/upload/2020/5/3Q3qy2.gif" class="aligncenter"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>闪亮按钮</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ height: 100vh; background: #000; display: flex; justify-content: center; align-items: center; } .btn{ padding: 1rem 3rem; font-size: 1rem; line-height: 1.5; color: #fff; --hue:190; background: hsl(var(--hue), 100%, 40%); border: 1px solid hsl(var(--hue), 100%, 40%); text-transform: uppercase; } .btn:hover{ background: hsl(var(--hue), 100%, 20%); } .btn.btn-ghost{ background: transparent; } .btn.btn-shine{ position: relative; overflow: hidden; } .btn.btn-shine::before{ position: absolute; width: 100%; height: 100%; top:0; left:0; background: linear-gradient(120deg,transparent, hsla(var(--hue), 100%, 40%,0.5),transparent); content: ""; transform: translateX(-100%); transition: 0.8s; } .btn.btn-shine:hover::before{ transform: translateX(100%); } .btn.btn-shine:hover{ box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 40%,0.5); } .btn.btn-success { --hue:350; } </style> </head> <body> <button class="btn btn-ghost btn-shine btn-success">hover me</button> </body> </html> </code></pre> <h2>三.下雪场景</h2> <img src="/file/upload/2020/5/6f2Izy.gif" class="aligncenter"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>想和你一起去看雪</title> <style> * { margin: 0; padding: 0; list-style: none; } body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0, #090a0f 100%); filter: drop-shadow(0 0 10px white); position: relative; } .snow { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; position: absolute; } .mywords { position: fixed; left: 50%; top:50%; transform: translate(-50%,-50%); color: #fff; font-size: 1.5em; line-height: 2em; font-weight: 500; display: flex; flex-wrap: wrap; } .mywords span{ animation: jumpin 0.5s ease-out both; } @keyframes jumpin { from{ transform: translateY(-20%); opacity: 0; } to{ transform: translateY(0); opacity: 1; } } </style> </head> <body> <p class="mywords"> 余生我只想和你看雪看星星看月亮，从诗词歌赋谈到人生理想。 </p> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function () { var words=$(".mywords").text().split(""); $(".mywords").empty(); words.forEach((w,i)=>{ $(`${w}`).css({ "animation-delay": 0.1*i+'s' }).appendTo($(".mywords")); }); for(var i=0;i<200;i++) { var x=Math.random()*100; var y=Math.random()*100; var scale=Math.random(); var opacity=Math.random(); var t1=Math.random()*20+10; var t2=Math.random()*30; var o=Math.random()*20-10; var x1=x+o; var x2=x+o/2; $(`<style> @keyframes fall${i} { ${y}%{ transform: translate(${x1}vw, ${y}vh) scale(${scale}); } to{ transform: translate(${x2}vw,100vh) scale(${scale}); } } </style>`).appendTo($("head")); $('<div class="snow"></div>') .css({ "transform": `translate(${x}vw, -10px) scale(${scale})`, "opacity": opacity, "animation": `fall${i} ${t1}s -${t2}s linear infinite` }) .appendTo($("body")).end() } }) </script> </body> </html> </code></pre> <h2>四.红色闪光月亮</h2> <img src="/file/upload/2020/5/nqyqUf.gif" class="aligncenter"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>红色的月亮</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background: black; height: 100vh; display: flex; justify-content: center; align-items: center; } .moon { width: 8em; height: 8em; border-radius: 50%; background: black; box-shadow: inset 0.5em -0.5em crimson; position: relative; animation: move 2s linear infinite; } .moon::before,.moon::after { position: absolute; width: 100%; height: 100%; background: inherit; box-shadow: inherit; border-radius: inherit; content: ""; } .moon::before{ filter: blur(5px); } .moon::after{ filter: blur(10px); } @keyframes move { to{ transform: rotate(1turn); } } </style> </head> <body> <div class="moon"></div> </body> </html> </code></pre> <h2>五.文字效果</h2> <img src="/file/upload/2020/5/JBBVna.gif" class="aligncenter"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本效果</title> <style> * { margin: 0; padding: 0; list-style: none; } body { background-color: #0f0f0f; height: 100vh; display: flex; justify-content: center; align-items: center; } .mywords { color: #fff; font-size: 1.5em; line-height: 1.8em; margin: 0 1em; } .mywords span { animation: lightin 0.8s both; } @keyframes lightin { from { opacity: 0; } 65% { opacity: 1; text-shadow: 0 0 30px #fff; } 75% { opacity: 1; } to { opacity: 0.7; } } </style> </head> <body> <p class="mywords"> 不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。 </p> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { var words=$(".mywords").text().split(""); $(".mywords").empty(); words.forEach((w,i)=>{ $(`${w}`) .css({ "animation-delay": 0.05*i+'s' }) .appendTo($(".mywords")); }) }) </script> </body> </html> </code></pre> <img src="/file/upload/2020/5/2yma2e.gif" class="aligncenter"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字遮罩效果</title> <style> * { margin: 0; padding: 0; list-style: none; } body { background-color: #0f0f0f; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .mywords { color:transparent; font-size: 1.5em; line-height: 1.8em; position: relative; animation: fontcolor 2s 1.6s forwards; } @keyframes fontcolor { to{ color: #fff; } } .mywords.from { margin: 1em 0; } .mywords::before{ content: ""; position: absolute; left: 0; top:0; width: 100%; height: 100%; background-color: cyan; transform: scaleX(0); transform-origin:left ; animation: move 2s cubic-bezier(0.75,0,0,1) forwards; } .mywords.from::before{ background-color: orange; animation-delay: 2s; } .mywords.from { animation-delay: 3.2s; } @keyframes move { 50%{ transform-origin: left; transform: scaleX(1); } 50.1% { transform-origin: right; } 100% { transform-origin: right; transform: scaleX(0); } } </style> </head> <body> <p class="mywords">我不知道将去何方，但我已在路上</p> <p class="mywords from">千与千寻</p> </body> </html> </code></pre> <img src="/file/upload/2020/5/A3mAji.gif" class="aligncenter"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字蒙版效果实现</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ height: 100vh; position: relative; } img,h1{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } img{ object-fit: cover; } h1{ font-size: 20vw; text-align: center; line-height: 100vh; mix-blend-mode: screen; background-color: #fff; } </style> </head> <body> <img src="bg.gif" alt=""> <h1>花未眠</h1> </body> </html> </code></pre></div> </div> <div class="b20 c_b"> </div> <div class="award"><div onclick="Go('https://www.youqizhuangbei.com/member/award.php?mid=21&itemid=14174');">打赏</div></div> <div class="b20"> </div> 本文转载自：网络 <div class="b20"> 所有权利归属于原作者，如文章来源标示错误或侵犯了您的权利请联系微信13520258486 </div> <div class="b20"> </div> <div class="head-txt"><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多></a>最近资讯中心</div> <div class="related"> <table width="100%"> <tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-14173.html" title="勇闯28个关卡学会HTML与HTML5基础｜FCC前端教程">• 勇闯28个关卡学会HTML与HTML5基础｜FCC前端教程</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-14172.html" title="VSCode的一些小操作(三)——同时更改所有相同的变量名或类名">• VSCode的一些小操作(三)——同时更改所有相同的</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-14171.html" title="你对HTML最最最常用的标签印象深刻吗？（总结HTML中最常用的标签）">• 你对HTML最最最常用的标签印象深刻吗？（总结HT</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-14170.html" title="一段JavaScript代码是如何执行的">• 一段JavaScript代码是如何执行的</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-14169.html" title="vue-quill-editor视频上传，图片上传到服务器模块，用video标签替换iframe">• vue-quill-editor视频上传，图片上传到服务器模</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-14168.html" title="2020大厂前端面试之vue专题（一）">• 2020大厂前端面试之vue专题（一）</a></td> </tr></table> <table width="100%"> <tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据配合蓝牙模块实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据配合蓝牙模块 </a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td> </tr></table> </div> <div class="b20"> </div> <div class="head-txt"><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多></a>最新资讯中心</div> <div class="related"><table width="100%"> <tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据配合蓝牙模块实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据配合蓝牙模块 </a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35500.html" title="STM32查询式按键输入[直接用寄存器]">• STM32查询式按键输入[直接用寄存器]</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35499.html" title="Ubuntu系统 USB设备端口绑定">• Ubuntu系统 USB设备端口绑定</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35498.html" title="2021-04-14 第四次按键输入实验">• 2021-04-14 第四次按键输入实验</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35497.html" title="Flutter扫码功能完美实现">• Flutter扫码功能完美实现</a></td> </tr></table> </div> <div class="b20"> </div> <div id="comment_div" style="display:;"> <div class="head-txt"><a href="https://www.youqizhuangbei.com/comment/index-htm-mid-21-itemid-14174.html">0 条</a>相关评论</div> <div class="c_b" id="comment_main"><div></div></div> </div> <script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/comment.js"></script> </div> <div class="m3r"> <div class="head-sub">推荐图文</div> <div class="list-thumb"><table width="100%"> </table> </div> <div class="head-sub mt20">推荐资讯中心</div> <div class="list-txt"><ul> </ul> </div> <div class="head-sub mt20">点击排行</div> <div class="list-rank"><ul> </ul></div> <div class="head-sub mt20">最新信息</div> <div class="list-rank"><ul> <li>1<a href="https://www.youqizhuangbei.com/sell/show-3.html" title="北京傲云欣欣科技公司专业提供中高压变频器维修电气设备维修">北京傲云欣欣科技公司专业提供中高压变频器维修</a></li> <li>2<a href="https://www.youqizhuangbei.com/sell/show-70.html" title="太原德力西高压变频器维修">太原德力西高压变频器维修</a></li> <li>3<a href="https://www.youqizhuangbei.com/sell/show-56.html" title="AMB安邦信高压变频器维修中降低设备故障频次的方法">AMB安邦信高压变频器维修中降低设备故障频次的</a></li> <li>4<a href="https://www.youqizhuangbei.com/sell/show-51.html" title="石家庄高压变频器维修请找北京傲云电气">石家庄高压变频器维修请找北京傲云电气</a></li> <li>5<a href="https://www.youqizhuangbei.com/sell/show-21.html" title="AMB安邦信高压变频器维修">AMB安邦信高压变频器维修</a></li> <li>6<a href="https://www.youqizhuangbei.com/sell/show-65.html" title="Samcovm三垦高压变频器维修中一些小技巧">Samcovm三垦高压变频器维修中一些小技巧</a></li> <li>7<a href="https://www.youqizhuangbei.com/sell/show-64.html" title="ABB传动ACS6000/ACS800维修中的故障分析方法">ABB传动ACS6000/ACS800维修中的故障分析方法</a></li> <li>8<a href="https://www.youqizhuangbei.com/sell/show-67.html" title="包头石家庄ABB高压变频器维修">包头石家庄ABB高压变频器维修</a></li> <li>9<a href="https://www.youqizhuangbei.com/sell/show-45.html" title="攀枝花陕西西门子罗宾康高压变频器维修厂家">攀枝花陕西西门子罗宾康高压变频器维修厂家</a></li> </ul></div> </div> </div> <div class="c_b"></div> </div> <script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/content.js"></script><div class="clear"> </div> <div class="other_item"> <div class="copyrightbar"> <div class="wrapper"> <dl class="fore1"> <dt>新手指南</dt> <dd> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member/register.php">注册新用户</a></div> <div><a rel="nofollow" target="_blank" href="">操作指南</a></div> <div><a rel="nofollow" target="_blank" href="">常见问题</a></div> </dd> </dl> <dl class="fore2"> <dt>采购商服务</dt> <dd> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/sell/">找产品</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/company/">找公司</a></div> <div><a rel="nofollow" target="_blank" href="">找采购</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/news/">看资讯</a></div> </dd> </dl> <dl class="fore3"> <dt>供应商服务</dt> <dd> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//home.php">企业商铺</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//grade.php">VIP服务</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//validate.php">认证服务</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/spread/">推广服务</a></div> </dd> </dl> <dl class="fore4"> <dt>交易安全</dt> <dd> <div><a target="_blank" href="">买家防骗</a></div> <div><a target="_blank" href="">卖家防骗</a></div> <div><a rel="nofollow" href="javascript:SendReport();">投诉举报</a></div> </dd> </dl> <dl class="fore5"> <dt>关注我们</dt> <dd> <div>手机网站: <a target="_blank" href="https://www.youqizhuangbei.com/mobile/mobile.php"></a></div> <div>新浪微博: <a target="_blank" href="http://" rel="nofollow"></a></div> <div>微信关注: </div> <div style="margin-top: 5px;"> <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=5fd78221597e88a4af3e2c8512a61d5f1f8dc535171ea7773562452f9042dafd"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="" title=""></a> </div> </dd> </dl> <div class="hotline"> 13520258486 周一至周五 9:00-18:00 （其他时间联系在线客服） <a rel="nofollow" class="btn-line-primary" href="https://www.youqizhuangbei.com/about/contact.html" target="_blank">24小时在线客服</a> </div> </div> <div class="wrapper mt20" id="other_item"> <div id="footer"> <div class="links" style="font-size: 14px;margin-bottom: 10px;"> 产品按字母分类： <a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=a" target="_blank">a</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=b" target="_blank">b</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=c" target="_blank">c</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=d" target="_blank">d</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=e" target="_blank">e</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=f" target="_blank">f</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=g" target="_blank">g</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=h" target="_blank">h</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=i" target="_blank">i</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=j" target="_blank">j</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=k" target="_blank">k</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=l" target="_blank">l</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=m" target="_blank">m</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=n" target="_blank">n</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=o" target="_blank">o</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=p" target="_blank">p</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=q" target="_blank">q</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=r" target="_blank">r</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=s" target="_blank">s</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=t" target="_blank">t</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=u" target="_blank">u</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=v" target="_blank">v</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=w" target="_blank">w</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=x" target="_blank">x</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=y" target="_blank">y</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=z" target="_blank">z</a> </div> <div class="links"> <a href="https://www.youqizhuangbei.com/about/index.html">关于我们</a> | <a href="https://www.youqizhuangbei.com/about/contact.html">联系方式</a> | <a href="https://www.youqizhuangbei.com/about/agreement.html">使用协议</a> | <a href="https://www.youqizhuangbei.com/about/copyright.html">版权隐私</a> | <a href="https://www.youqizhuangbei.com/sitemap/">网站地图</a> | <a href="https://www.youqizhuangbei.com/spread/">排名推广</a> | <a href="https://www.youqizhuangbei.com/ad/">广告服务</a> | <a href="https://www.youqizhuangbei.com/gift/" target="_blank" rel="nofollow">积分商城</a> | <a href="javascript:SendReport();" rel="nofollow">违规举报</a> </div> <div class="copyright"> <div id="copyright">(c)2008-2023 湖北傲云电气有限公司 All Rights Reserved<script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?20195b23529f03df5cb2789a744df859";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div> <div><a href="http://www.miibeian.gov.cn" target="_blank" rel="nofollow">鄂ICP备2020021666号-11</a></div></div> <div class="authentication"> <div class="authentication_bg"> <a rel="nofollow" target="_blank" class="cert-1" href="#" title="网络警察"></a> <a rel="nofollow" target="_blank" class="cert-2" href="#" title="网警备案"></a> <a rel="nofollow" target="_blank" class="cert-3" href="#" title="网络工商"></a> <a rel="nofollow" target="_blank" class="cert-4" href="#" title="浙江省网站信用联盟"></a> <a rel="nofollow" target="_blank" class="cert-5" href="#" title="可信网站"></a> <a rel="nofollow" target="_blank" class="cert-6" href="/" title="违法和不良信息举报中心"></a> <a rel="nofollow" target="_blank" class="cert-7" href="/" title="违法和不良信息举报中心APP下载"></a> </div> </div> </div> </div> </div> </div> <div class="feedBackWidget"> <div class="ronline"><a href="//wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes" target="_blank" title=""></a></div> <div class="rweixin"><a href="javascript:Dqrcode();"></a></div> <div class="feedback"><a href="javascript:SendReport();"></a></div> <div class="back2top" style="display: none;"><a href="javascript:void(0);" title="返回顶部"> </a></div> </div><script type="text/javascript"> //全站悬浮右侧 $('.guess').scrollToFixed({ marginTop: $('.small-goods').outerHeight(true) - 345, limit: function() { var limit = $('.other_item').offset().top ; return limit; }, minWidth: 1000, zIndex: 999, fixed: function() { }, dontCheckForPositionFixedSupport: true }); //右侧到位自动隐藏 function changeScreen() { var itemTop = document.getElementById("other_item").offsetTop; if ($(document).scrollTop() > itemTop - 600) { $(".guess").hide(); } else if ($(window).width() < 1200) { $(".guess").hide(); } else { $(".guess").show(); } } $(window).scroll(function() { changeScreen(); }); $(window).resize(function(e) { changeScreen(); }); </script> <script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/myjs.js"></script> <script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/topso.js"></script> <script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/scrolltofixed.js"></script> <script type="text/javascript"> </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d7f1c93b824c5ee2887566c40d0984af"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>