也想出現在這里?聯系我們

wordpress主題頁面頂部加載進度條的實現

  • 文章介紹
  • 升級版本
  • 評價&建議

wordpress主題頁面頂部加載進度條的實現,大叔第一時間能想到的就是css3了,但是可能對IE低版本的瀏覽器兼容性不好了,但是玩wordpress的,都無視IE了哈,那么,下面我就直接說教程吧,簡單粗暴,css3+JQ了辣。

CSS3?
  1. body{
  2. ????????????????margin:0;
  3. ????????????}
  4. ????????????#progress?{
  5. ????????????????position:fixed;
  6. ????????????????height:?2px;
  7. ????????????????background:#2085c5;
  8. ????????????????transition:opacity?500ms?linear
  9. ????????????}
  10. ????????????#progress.done?{
  11. ????????????????opacity:0
  12. ????????????}
  13. ????????????#progress?span?{
  14. ????????????????position:absolute;
  15. ????????????????height:2px;
  16. ????????????????-webkit-box-shadow:#2085c5?1px?0?6px?1px;
  17. ????????????????-webkit-border-radius:100%;
  18. ????????????????opacity:1;
  19. ????????????????width:150px;
  20. ????????????????rightright:-10px;
  21. ????????????????-webkit-animation:pulse?2s?ease-out?0s?infinite;
  22. ????????????}
  23. ????????????@-webkit-keyframes?pulse?{
  24. ????????????????30%?{
  25. ????????????????????opacity:.6
  26. ????????????????}
  27. ????????????????60%?{
  28. ????????????????????opacity:0;
  29. ????????????????}
  30. ????????????????100%?{
  31. ????????????????????opacity:.6
  32. ????????????????}
  33. }

對的,僅針對針對webkit內核瀏覽器寫的,處女座的你,可以適當的多寫一些前綴。

HTML代碼

  1. <div?id="progress">
  2. ????????????<span></span>
  3. </div>

jquery代碼

  1. $({property:?0}).animate({property:?100},?{
  2. ????????????????duration:?3000,
  3. ????????????????step:?function()?{
  4. ????????????????????var?percentage?=?Math.round(this.property);
  5. ????????????????????$('#progress').css('width',??percentage+"%");
  6. ?????????????????????if(percentage?==?100)?{
  7. ????????????????????????????$("#progress").addClass("done");//完成,隱藏進度條
  8. ????????????????????????}
  9. ????????????????}
  10. });

活學活用吧,上面設置的時間是3秒,根據自己的需求設定時間吧,到了這步,wordpress主題頁面頂部加載進度條的實現就出現了,做為想學習者,我想你應該知道ctrl+f5是去緩存刷新,刷新后,看看刷新網頁,頂部是不是出現了加載進度條了。。恩,就是這樣!

有用8
  • 2015.07.02初次和大家見面了!

已擁有1人對該主題的建議

  1. 0樓
    oeasy:

    感謝 不說我真不知道ctrl+f5是去緩存刷新

    2017-05-19 下午 12:02 [回復]

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
夫妇野外交换HD高清版,免费A片在线观看,亚洲精品国产自在现线,中国老妇人60OLDMANTV