国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

看完你也想編寫自己的 react 插件

xingpingz / 1753人閱讀

摘要:清楚自己想要什么樣的組件,就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間,窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。

副標題----為什么我要寫這個 react 插件

圖片懶加載是項目中常用的功能,然而現有 react 懶加載組件庫,用著都不是很爽了 ?。概括一下有如下幾點:

沒有只針對 image 懶加載組件。多數組件庫都內置了模塊、組件、腳本、iframe 懶加載功能,而弱化了 image 懶加載功能。

不支持動畫顯示效果。

不靈活,可配置度不高。

placeholder 不能組件化。

不支持響應式圖片( picture / srcset )。

react-lazyimg-component

清楚自己想要什么樣的組件,就自己動手擼唄 ?。于是乎,react-lazyimg-component 就誕生了 ?。咱們先來看看它的效果吧:

singsong: 如果大家有時間,窩還是鼓勵大家自己動手實現一些小插件。

PC 預覽:

使勁猛擊這里

手機預覽(掃一掃):

什么情況需要使用它 1. 小巧輕便,簡單易用,基本無學習成本

在那個 jQuery 一統天下的年代,擼代碼就用 jQuery 一把梭。其中
jQuery.lazyload 是一個很常用圖片懶加載插件。 可能很多像我一樣的小伙伴們,懶加載就直接上 jQuery.lazyload,早已習慣了 jQuery.lazyload 使用。 于是自己就琢磨能否繼承 jQuery.lazyload 使用方法同時保持 react 特有組件特性。這樣可以很快上手~?

singsong: 這里只是繼承了 jQuery.lazyload 配置特性,不是完全繼承。畢竟 jQuery 與現在主流的 MVVM 框架思想截然不同。

如果小伙伴們熟悉 jQuery.lazyload , 完全沒有學習成本直接上手 react-lazyimg-component 哈。 只說不是寫,然并卵。那我們來看看它到底好用不:

安裝
// npm
$> npm install react-lazyimg-component
// yarn
$> yarn add react-lazyimg-component
使用
// 引入
import Lazyimg, { withLazyimg } from "react-lazyimg-component";

// 調用
;

是不是很簡單,有木有 ?。上述只是使用 react-lazyimg-component 的默認配置。 這里我們可以通過配置項來定制懶加載的行為:

// 引入 lazyimg
import Lazyimg, { withLazyimg } from "react-lazyimg-component";
// 引入 volecity.js
import "velocity-animate";
import "velocity-animate/velocity.ui";

// 配置
const config = {
  threshold: 100, // 指定觸發閾值
  js_effect: "transition.fadeIn", // 支持 velocity.js 動畫效果
};
// 基于配置項生成對應 Lazy 組件
const Lazy = withLazyimg(config);

// 調用
;

接下來我們來看看 react-lazyimg-component 都那些配置項:

threshold: 0, // 指定距離底部多少距離時觸發加載
event: "scroll", // 指定觸發事件,默認為"scroll"
js_effect: undefined, // 顯示圖片的js動畫效果
css_effect: undefined, // 顯示圖片的css動畫效果
container: window, // 指定容器,默認為window
parent: undefined, // 可以指定動畫效果作用于元素的哪個父級元素
appear: null, // 元素出現在可視窗口時觸發appear鉤子函數
load: null,  // 元素圖片的加載完后觸發load鉤子函數
error: null, // 圖片加載出錯時觸發error鉤子函數
node_type: "img", // 指定生成的節點類型,默認為"img"
placeholder: // 占位元素,除了支持普通的圖片外,還支持react組件。
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",

是不是很眼熟 ?,如果你熟悉 jquery.lazyload,那么你只需了解如下幾個配置項即可:

js_effect: 指定元素顯示的動畫效果,基于velocity.js動畫實現。使用之前需加載velocity.js

css_effect: 指定元素顯示的動畫效果,基于animate.css動畫實現。使用之前需安裝animate.css

parent: 用于指定動畫效果作用于元素的哪個父級元素。可取值:

父元素的 selector 選擇器(字符串)

父級層級 level(整數)

node_type: 指定 react 將生成的元素類型,默認為"img"。

placeholder: 占位元素,除了支持普通的圖片外,還支持 react 組件。

2. 支持 velocity.js、animate.css 動畫效果庫,及自定動畫效果。同時還支持動畫效果作用于父級元素。

指定 js-effect 配置項來配置 velocity.js 動畫效果

注意:js-effect 依賴于 velocity.js。需要確保 velocity.js 已加載。
// 引入 lazyimg
import Lazyimg, { withLazyimg } from "react-lazyimg-component";
// 引入 volecity.js
import "velocity-animate";
import "velocity-animate/velocity.ui";
// 配置
const config = {
  placeholder: "loading.svg",
  js_effect: "transition.fadeIn", // 支持 velocity.js 動畫效果
};
const Lazy = withLazyimg(config);
// 調用
;

直接上效果了 ?

指定 css-effect 配置項來配置 animate.css 動畫效果

注意:css-effect 依賴于 animate.css。需要確保 animate.css 已安裝。
  // 配置
  const config = {
    js_effect="transition.flipXIn" // 不會生效
    css_effect={["animated", "rollIn"]} // 定制 css 動畫效果
  };
  const Lazy = withLazyimg(config);
  // 調用
  ;

直接上效果了 ?

指定 parent 配置項指定父級元素動畫效果

singsong: 為什么懶加載的動畫效果只作用于目標元素,某些條件下作用于目標元素的父級元素會有意想不到效果哦 ?。
// 指定動畫效果作用于該父級元素 <div id="w2ck022" className="example-img"> <Lazyimg className="lazy" src={"http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg"} css_effect={["animated", "flipInY"]} // 定制 css 動畫效果 parent=".example" // 指定父級元素選擇器,也可以指定父級層級level:2 /> </div> </div></pre> <p>直接上效果了 ?</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000013614823?w=706&h=755");</script></p> <b>3. react 組件式 placeholder</b> <pre>singsong: 傳統的 placeholder 通常都是由圖片來代替,為什么不能用組件來定制,這樣可擴展性更高。完全可以擺脫設計師的束縛,咋們開發自由發揮?! 想想有木有有點小雞凍 ?<del>~</del>~</pre> <p>先定義 placeholder 組件</p> <pre>import React from "react"; import "./style.scss"; export default props => { let { className, text, img, children } = props; return ( <div className={["placeholder", className] .filter(item => { if (item) { return item; } }) .join(" ")} > {img && } {text && <span id="mkewcq2" className="placeholder-text">{children || text}</span>} </div> ); };</pre> <p>指定 placeholder 配置項為上述定義的 placeholder 組件</p> <pre>// 配置 const Lazy = withLazyimg({ js_effect: "transition.perspectiveDownIn", placeholder: <Placeholder img={require("./loading.svg")} />, }); // 調用 <Lazy className="lazy" src={"http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg"} />;</pre> <p>直接上效果了 ?</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000013614824?w=702&h=851");</script></p> <pre>singsong: 圖中小火焰有木有很耀眼<del>~</del> </pre> <p>接著咋們來看看組件式 placeholder 應用場景案例,直接上效果了 ?</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000013614825?w=371&h=669");</script></p> <p>上圖是分類頁通過定制顯示文案的 placeholder 組件來代替普通的灰色圖片,效果是不是看著還行 ?。這是我在實際項目中使用的案例。這里小伙伴可以自由發揮哈<del>~</del>。如果你有不錯 idea 可以@我哈,先謝了!</p> <b>4. 響應式圖片( picture / srcset )</b> <p>為了實現 web 應用的極致體驗,Progressive Web App 漸進式網頁應用程序越來越受到開發者們重視,其中響應式圖片就是其中一個重要技術項。為了跟著大部隊,咋們也需要了解了解噢!</p> <p>srcset 特性實現響應式圖片</p> <pre> // dpr <Lazyimg className="lazy" src={"http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg"} srcSet="source_1x.png 1x, source_2x.png 2x, source_3x.png 3x, source_3.5x.png 3.5x" js_effect="transition.bounceIn" /></pre> <p>直接上效果了 ?</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000013614826?w=480&h=577");</script></p> <pre>singsong: 這里 srcset 配合 sizes 特性可以實現更好的效果</pre> <p>picture 元素實現響應式圖片</p> <pre> <picture> <source media="(min-width: 650px)" srcSet="https://www.w3schools.com/tags/img_pink_flowers.jpg" /> <source media="(min-width: 465px)" srcSet="https://www.w3schools.com/tags/img_white_flower.jpg"/> <Lazyimg className="lazy" src={"http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg"} js_effect="transition.expandIn" /> </picture></pre> <p>直接上效果了 ?</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000013614827");</script></p> <b>后語</b> <p>這個插件是我由項目中提煉出的,個人用著還挺順手,就拿出與大家分享分享。另外,畢竟個人能力有限,如果你發現插件有問題或有什么好的建議,也請告知一下,先這里謝過了 ?。最后歡迎star?、歡迎watch?、歡迎fork?</p> </div> <div id="ggy0aco" class="mt-64 tags-seach" > <div id="2owmesq" class="tags-info"> <a style="width:120px;" title="GPU云服務器" href="http://specialneedsforspecialkids.com/site/product/gpu.html">GPU云服務器</a> <a style="width:120px;" title="云服務器" href="http://specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo">云服務器</a> <a style="width:120px;" title="自己編寫的小程序" href="http://specialneedsforspecialkids.com/yun/tag/zijibianxiedexiaochengxu/">自己編寫的小程序</a> <a style="width:120px;" title="在js中怎樣編寫插件" href="http://specialneedsforspecialkids.com/yun/tag/zaijszhongzenyangbianxiechajian/">在js中怎樣編寫插件</a> <a style="width:120px;" title="自己編寫web服務器" href="http://specialneedsforspecialkids.com/yun/tag/zijibianxiewebfuwuqi/">自己編寫web服務器</a> <a style="width:120px;" title="自己編寫云服務器搶紅包" href="http://specialneedsforspecialkids.com/yun/tag/zijibianxieyunfuwuqiqianghongbao/">自己編寫云服務器搶紅包</a> </div> </div> <div id="2cwms20" class="entry-copyright mb-30"> <p class="mb-15"> 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。</p> <p>轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51949.html</p> </div> <ul class="pre-next-page"> <li id="uqumgik" class="ellipsis"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/51948.html">上一篇:分頁組件</a></li> <li id="u20yece" class="ellipsis"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/51950.html">下一篇:用CSS3實現鐘表效果</a></li> </ul> </div> <div id="oqkg2cg" class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相關文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div id="cswyss2" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/115778.html"><b><em>看完</em><em>你<em>也想</em></em><em>編寫</em><em>自己</em><em>的</em> <em>react</em> <em>插件</em></b></a></h2> <p class="ellipsis2 good">摘要:清楚自己想要什么樣的組件,就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間,窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。 副標題----為什么我要寫這個 react 插件 圖片懶加載是項目中常用的功能,然而現有 react 懶加載組件庫,用著都不是很爽了 ?。概括一下有如下幾點: 沒有只針對 image 懶加載組件。多...</p> <div id="iwo2cc0" class="com_white-left-info"> <div id="qcgagi0" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-1530.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/15/small_000001530.jpg" alt=""><span id="2qskcs0" class="layui-hide64">Vixb</span></a> <time datetime="">2019-08-30 14:06</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="2ksw0ao" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/93278.html"><b><em>看完</em><em>你<em>也想</em></em><em>編寫</em><em>自己</em><em>的</em> <em>react</em> <em>插件</em></b></a></h2> <p class="ellipsis2 good">摘要:清楚自己想要什么樣的組件,就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間,窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。 副標題----為什么我要寫這個 react 插件 圖片懶加載是項目中常用的功能,然而現有 react 懶加載組件庫,用著都不是很爽了 ?。概括一下有如下幾點: 沒有只針對 image 懶加載組件。多...</p> <div id="uei022q" class="com_white-left-info"> <div id="aou0qqe" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-1484.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/14/small_000001484.jpg" alt=""><span id="22cswcu" class="layui-hide64">zhou_you</span></a> <time datetime="">2019-08-22 15:13</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="oekqu0u" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/124521.html"><b>沒有基礎或者基礎差,如何快速學會編程?這6招絕對好使</b></a></h2> <p class="ellipsis2 good">摘要:第一點,先清楚你的目的你學編程想要做什么你對哪方面感興趣然后去百度查一下哪些編程語言適合做那個方向,帶著目的去學習,如果一開始沒選好,中途掉頭就很可惜了。 你是不是...</p> <div id="i2ms0aq" class="com_white-left-info"> <div id="uimoiaa" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-255.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/02/small_000000255.jpg" alt=""><span id="oywci0s" class="layui-hide64">EasonTyler</span></a> <time datetime="">2021-11-23 09:51</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="0cskeee" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/84471.html"><b>前端周刊第64期:你真<em>的</em>會提問么?</b></a></h2> <p class="ellipsis2 good">摘要:但是究竟什么是區塊鏈呢如何基于區塊鏈構建去中心化的應用這個系列文章很有料,有圖文解釋有代碼實例,非常適合入門。想知道我接下來會寫些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領域跟上時代的腳步。 showImg(https://segmentfault.com/img/remote/1460000010417511); 共 2044 字,讀完需 4 分鐘。本期以《提問的智慧》作...</p> <div id="suyqkw0" class="com_white-left-info"> <div id="oagi0ym" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-649.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/06/small_000000649.jpg" alt=""><span id="qs0ewm0" class="layui-hide64">wfc_666</span></a> <time datetime="">2019-08-20 18:25</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="g2qswiu" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/54096.html"><b>879本IT技術書籍(都<em>看<em>完你</em></em>就可以升仙兒了)</b></a></h2> <p class="ellipsis2 good">摘要:珍藏版收集了好幾年的書回過頭來一看真不少拿過來跟你們一起分享下載鏈接我也會在官網上發布視頻教程呀電影呀有用的資源你們懂得作者作者科技站長官網百度搜索科技博客公眾號搜索 珍藏版---收集了好幾年的書,回過頭來一看,真不少,拿過來跟你們一起分享 showImg(https://img-blog.csdnimg.cn/20181123115931741.png?x-oss-process=i...</p> <div id="aa2k0ec" class="com_white-left-info"> <div id="ws00am0" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-83.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/00/small_000000083.jpg" alt=""><span id="qew0u2k" class="layui-hide64">用戶83</span></a> <time datetime="">2019-08-02 15:23</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div id="202aoaa" class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>發表評論</span></h3> <div id="gqickmy" class="xcp-publish-main flex_box_zd"> <div id="kkqics0" class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陸后可評論</a> </div> </div> </div> <div id="u2q2myk" class="site-box-content"> <div id="iic00wi" class="site-content-title"> <h3 class="top-com-title mb-64"><span>0條評論</span></h3> </div> <div id="egaqiii" class="pages"></ul></div> </div> </div> <div id="a2uag0e" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div id="cckaegk" class=""> <div id="u2q20qa" class="com_layuiright-box user-msgbox"> <a href="http://specialneedsforspecialkids.com/yun/u-506.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/05/small_000000506.jpg" alt=""></a> <h3><a href="http://specialneedsforspecialkids.com/yun/u-506.html" rel="nofollow">xingpingz</a></h3> <h6>男<span>|</span>高級講師</h6> <div id="is2cgue" class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(506)" id="attenttouser_506" class="grad follow-btn notfollow attention">我要關注</a> <a href="javascript:login()" title="發私信" >我要私信</a> </div> <div id="qq0oggg" class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="http://specialneedsforspecialkids.com/yun/ut-506.html" class="box_hxjz">閱讀更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/122386.html">esp8266 TCP接入巴法云物聯網云平臺</a></h3> <p>閱讀 4276<span>·</span>2021-10-13 09:39</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/119291.html">如何學好c語言</a></h3> <p>閱讀 482<span>·</span>2021-09-06 15:02</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/116742.html">面試之旅-深圳 遇到的問題和一些自己的拓展以及答案2</a></h3> <p>閱讀 3229<span>·</span>2019-08-30 15:53</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/115288.html">《JavaScript Dom編程藝術》讀書筆記(二)</a></h3> <p>閱讀 1040<span>·</span>2019-08-30 13:04</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/115004.html">flex布局和float布局混合使用導致的css失效問題 (上)</a></h3> <p>閱讀 2029<span>·</span>2019-08-30 11:27</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/109685.html">En-Tan-Mo社區代言人征集令</a></h3> <p>閱讀 2010<span>·</span>2019-08-26 13:51</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/107105.html">NPM酷庫:async 強大的異步任務控制</a></h3> <p>閱讀 2092<span>·</span>2019-08-26 11:33</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/106470.html">不安全的JS</a></h3> <p>閱讀 2902<span>·</span>2019-08-26 10:36</p></li> </ul> </div> <!-- 文章詳情右側廣告--> <div id="a2owogu" class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活動</span></h6> <div id="qs2koqe" class="com_adbox"> <div id="myek0oc" class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="http://specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="http://specialneedsforspecialkids.com/yun/data/attach/240625/2rTjEHmi.png" alt="云服務器"> </a> </div> <div> <a href="http://specialneedsforspecialkids.com/site/product/gpu.html" rel="nofollow"> <img src="http://specialneedsforspecialkids.com/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務器"> </a> </div> </div> </div> </div> <!-- banner結束 --> <div id="kyeg0my" class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"http://specialneedsforspecialkids.com/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按鈕 --> <div id="wkquama" class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩層 --> <div id="2o2ogi2" class="site-mobile-shade"></div> <!--付費閱讀 --> <div class="y2ioeqq" id="payread"> <div id="saeasgs" class="layui-form-item">閱讀需要支付1元查看</div> <div id="i2mqkm2" class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("復制代碼 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("復制成功") }); clipboard.on('error', function(e) { alert("復制失敗") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="http://specialneedsforspecialkids.com/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="http://specialneedsforspecialkids.com/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="http://specialneedsforspecialkids.com/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付費閱讀", shadeClose: true, content: $('#payread') }); } // 舉報 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加載評論 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("評論內容不能為空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"http://specialneedsforspecialkids.com/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "http://specialneedsforspecialkids.com/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人贊"); } }); }else{ alert("您已經贊過"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交數據的類型 POST GET type:"POST", //提交的網址 url:"http://specialneedsforspecialkids.com/yun/favorite/topicadd.html", //提交的數據 data:{tid:_tid,rs:_rs}, //返回數據的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在請求之前調用的函數 beforeSend:function(){}, //成功返回之后調用的函數 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //調用執行后調用的函數 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //調用出錯執行的函數 error: function(){ //請求出錯處理 postadopt=false; } }); } </script> <footer> <div id="2agwc0a" class="layui-container"> <div id="yye0amy" class="flex_box_zd"> <div id="iyesk0c" class="left-footer"> <h6><a href="http://specialneedsforspecialkids.com/"><img src="http://specialneedsforspecialkids.com/yun/static/theme/ukd//images/logo.png" alt="UCloud (優刻得科技股份有限公司)"></a></h6> <p>UCloud (優刻得科技股份有限公司)是中立、安全的云計算服務平臺,堅持中立,不涉足客戶業務領域。公司自主研發IaaS、PaaS、大數據流通平臺、AI服務平臺等一系列云計算產品,并深入了解互聯網、傳統企業在不同場景下的業務需求,提供公有云、混合云、私有云、專有云在內的綜合性行業解決方案。</p> </div> <div id="c2yewgw" class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud與云服務</h6> <p><a href="http://specialneedsforspecialkids.com/site/about/intro/">公司介紹</a></p> <p><a >加入我們</a></p> <p><a href="http://specialneedsforspecialkids.com/site/ucan/onlineclass/">UCan線上公開課</a></p> <p><a href="http://specialneedsforspecialkids.com/site/solutions.html" >行業解決方案</a></p> <p><a href="http://specialneedsforspecialkids.com/site/pro-notice/">產品動態</a></p> </li> <li> <h6>友情鏈接</h6> <p><a >GPU算力平臺</a></p> <p><a >UCloud私有云</a></p> <p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >Pinex</a></p> <p><a >AI繪畫</a></p> </li> <li> <h6>社區欄目</h6> <p><a href="http://specialneedsforspecialkids.com/yun/column/index.html">專欄文章</a></p> <p><a href="http://specialneedsforspecialkids.com/yun/udata/">專題地圖</a></p> </li> <li> <h6>常見問題</h6> <p><a href="http://specialneedsforspecialkids.com/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="http://specialneedsforspecialkids.com/site/about/news/recent/" >新聞動態</a></p> <p><a href="http://specialneedsforspecialkids.com/site/about/news/report/">媒體動態</a></p> <p><a href="http://specialneedsforspecialkids.com/site/cases.html">客戶案例</a></p> <p><a href="http://specialneedsforspecialkids.com/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優刻得"></span> <p>掃掃了解更多</p></div> </div> <div id="youa2qc" class="copyright">Copyright ? 2012-2023 UCloud 優刻得科技股份有限公司<i>|</i><a rel="nofollow" >滬公網安備 31011002000058號</a><i>|</i><a rel="nofollow" ></a> 滬ICP備12020087號-3</a><i>|</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站,您可能还对以下资源感兴趣:</p> <a href="http://specialneedsforspecialkids.com/" title="国产xxxx99真实实拍">国产xxxx99真实实拍</a> <div class="friend-links"> <a href="http://belistarlp.com/">国产黄色在线</a> </div> </div> </footer> <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><div id="qucs2" class="pl_css_ganrao" style="display: none;"><source id="qucs2"></source><option id="qucs2"><delect id="qucs2"><strike id="qucs2"></strike></delect></option><xmp id="qucs2"></xmp><nav id="qucs2"></nav><menu id="qucs2"><li id="qucs2"><acronym id="qucs2"></acronym></li></menu><object id="qucs2"></object><rt id="qucs2"></rt><nav id="qucs2"></nav><tfoot id="qucs2"><input id="qucs2"><tbody id="qucs2"></tbody></input></tfoot><delect id="qucs2"></delect><sup id="qucs2"><td id="qucs2"><code id="qucs2"></code></td></sup><strike id="qucs2"><s id="qucs2"><bdo id="qucs2"></bdo></s></strike><fieldset id="qucs2"><table id="qucs2"><tr id="qucs2"></tr></table></fieldset><small id="qucs2"><noframes id="qucs2"><ul id="qucs2"></ul></noframes></small><button id="qucs2"></button><dfn id="qucs2"></dfn><xmp id="qucs2"></xmp><s id="qucs2"></s><del id="qucs2"><tr id="qucs2"><s id="qucs2"></s></tr></del><dfn id="qucs2"></dfn><optgroup id="qucs2"></optgroup><code id="qucs2"><em id="qucs2"><del id="qucs2"></del></em></code><dl id="qucs2"></dl><input id="qucs2"></input><noscript id="qucs2"><acronym id="qucs2"><xmp id="qucs2"></xmp></acronym></noscript><xmp id="qucs2"></xmp><bdo id="qucs2"></bdo><dfn id="qucs2"></dfn><abbr id="qucs2"></abbr><pre id="qucs2"><blockquote id="qucs2"><tfoot id="qucs2"></tfoot></blockquote></pre><center id="qucs2"></center><button id="qucs2"></button><tbody id="qucs2"></tbody><delect id="qucs2"><strike id="qucs2"><menu id="qucs2"></menu></strike></delect><menu id="qucs2"><li id="qucs2"><acronym id="qucs2"></acronym></li></menu><bdo id="qucs2"></bdo><dfn id="qucs2"></dfn><tbody id="qucs2"></tbody><pre id="qucs2"></pre><center id="qucs2"></center><tbody id="qucs2"></tbody><strong id="qucs2"><abbr id="qucs2"><kbd id="qucs2"></kbd></abbr></strong><dl id="qucs2"></dl><samp id="qucs2"></samp><tbody id="qucs2"><button id="qucs2"><blockquote id="qucs2"></blockquote></button></tbody><acronym id="qucs2"></acronym><source id="qucs2"></source><optgroup id="qucs2"></optgroup><strike id="qucs2"><menu id="qucs2"><noscript id="qucs2"></noscript></menu></strike><bdo id="qucs2"><option id="qucs2"><delect id="qucs2"></delect></option></bdo><pre id="qucs2"></pre><pre id="qucs2"></pre><option id="qucs2"></option><nav id="qucs2"></nav><tr id="qucs2"></tr><cite id="qucs2"></cite><delect id="qucs2"><strike id="qucs2"><s id="qucs2"></s></strike></delect><samp id="qucs2"><tfoot id="qucs2"><source id="qucs2"></source></tfoot></samp><tbody id="qucs2"><pre id="qucs2"><blockquote id="qucs2"></blockquote></pre></tbody><pre id="qucs2"></pre><abbr id="qucs2"><pre id="qucs2"><blockquote id="qucs2"></blockquote></pre></abbr><sup id="qucs2"></sup><tfoot id="qucs2"><object id="qucs2"><small id="qucs2"></small></object></tfoot><s id="qucs2"><noscript id="qucs2"><acronym id="qucs2"></acronym></noscript></s><dl id="qucs2"></dl><delect id="qucs2"><tr id="qucs2"><s id="qucs2"></s></tr></delect><em id="qucs2"></em><noscript id="qucs2"><option id="qucs2"><delect id="qucs2"></delect></option></noscript><code id="qucs2"><em id="qucs2"><tr id="qucs2"></tr></em></code><dd id="qucs2"></dd><code id="qucs2"><em id="qucs2"><del id="qucs2"></del></em></code><button id="qucs2"></button><th id="qucs2"></th><rt id="qucs2"><code id="qucs2"><em id="qucs2"></em></code></rt><object id="qucs2"></object><source id="qucs2"></source><option id="qucs2"></option><strong id="qucs2"><noframes id="qucs2"><samp id="qucs2"></samp></noframes></strong><optgroup id="qucs2"></optgroup><optgroup id="qucs2"></optgroup><sup id="qucs2"></sup><del id="qucs2"><dfn id="qucs2"><rt id="qucs2"></rt></dfn></del><blockquote id="qucs2"></blockquote><tbody id="qucs2"></tbody><button id="qucs2"></button><rt id="qucs2"></rt><del id="qucs2"><tr id="qucs2"><rt id="qucs2"></rt></tr></del><sup id="qucs2"><center id="qucs2"><dl id="qucs2"></dl></center></sup><s id="qucs2"><noscript id="qucs2"><option id="qucs2"></option></noscript></s><option id="qucs2"></option><samp id="qucs2"><tbody id="qucs2"><wbr id="qucs2"></wbr></tbody></samp><noscript id="qucs2"><option id="qucs2"><delect id="qucs2"></delect></option></noscript><optgroup id="qucs2"></optgroup><noscript id="qucs2"></noscript><blockquote id="qucs2"></blockquote><strong id="qucs2"><noframes id="qucs2"><ul id="qucs2"></ul></noframes></strong><li id="qucs2"><acronym id="qucs2"><xmp id="qucs2"></xmp></acronym></li><sup id="qucs2"><td id="qucs2"><dl id="qucs2"></dl></td></sup><small id="qucs2"></small><button id="qucs2"></button><bdo id="qucs2"></bdo><th id="qucs2"></th><rt id="qucs2"></rt><code id="qucs2"><table id="qucs2"><tr id="qucs2"></tr></table></code><abbr id="qucs2"><pre id="qucs2"><blockquote id="qucs2"></blockquote></pre></abbr><optgroup id="qucs2"></optgroup><optgroup id="qucs2"></optgroup><strike id="qucs2"></strike><delect id="qucs2"><strike id="qucs2"><menu id="qucs2"></menu></strike></delect><source id="qucs2"><strong id="qucs2"><noframes id="qucs2"></noframes></strong></source><pre id="qucs2"><center id="qucs2"><fieldset id="qucs2"></fieldset></center></pre><td id="qucs2"></td><s id="qucs2"></s><tbody id="qucs2"></tbody><xmp id="qucs2"></xmp><pre id="qucs2"></pre><bdo id="qucs2"></bdo><acronym id="qucs2"><dd id="qucs2"><strong id="qucs2"></strong></dd></acronym><menu id="qucs2"></menu><object id="qucs2"><tbody id="qucs2"><button id="qucs2"></button></tbody></object><sup id="qucs2"><td id="qucs2"><code id="qucs2"></code></td></sup><option id="qucs2"></option><pre id="qucs2"></pre><dd id="qucs2"></dd><tr id="qucs2"><s id="qucs2"><bdo id="qucs2"></bdo></s></tr><rt id="qucs2"><code id="qucs2"><em id="qucs2"></em></code></rt><menu id="qucs2"></menu><tbody id="qucs2"><pre id="qucs2"><samp id="qucs2"></samp></pre></tbody><bdo id="qucs2"></bdo><kbd id="qucs2"></kbd><strike id="qucs2"></strike><s id="qucs2"></s><nav id="qucs2"></nav><nav id="qucs2"></nav><abbr id="qucs2"><dfn id="qucs2"><center id="qucs2"></center></dfn></abbr><kbd id="qucs2"></kbd><fieldset id="qucs2"><optgroup id="qucs2"><tr id="qucs2"></tr></optgroup></fieldset><acronym id="qucs2"></acronym><button id="qucs2"><samp id="qucs2"><tfoot id="qucs2"></tfoot></samp></button><abbr id="qucs2"></abbr><em id="qucs2"><del id="qucs2"><tr id="qucs2"></tr></del></em><object id="qucs2"></object><tbody id="qucs2"></tbody><delect id="qucs2"><strike id="qucs2"><s id="qucs2"></s></strike></delect><strike id="qucs2"><s id="qucs2"><noscript id="qucs2"></noscript></s></strike><sup id="qucs2"></sup><tr id="qucs2"></tr><table id="qucs2"></table><pre id="qucs2"></pre><tbody id="qucs2"><button id="qucs2"><ul id="qucs2"></ul></button></tbody></div> <script src="http://specialneedsforspecialkids.com/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>