代码收集贴 - 生活在别处

本文专门收集一些CSS、JS等代码，遇到好的代码，在此做个记录，长期持续更新。

CSS代码

高斯模糊(毛玻璃)效果

.css{-webkit-backface-visibility: hidden;-webkit-filter: blur(4px);-moz-filter: blur(4px);-o-filter: blur(4px);-ms-filter: blur(4px);filter: blur(4px);}

CSS3 Hover旋转

.css{-webkit-transition:all 1.5s ease;transition:all 1.5s ease;} .css:hover{-webkit-transform:rotateY(360deg);transform:rotateY(360deg);}

平滑左右移动效果

.css{-webkit-transition: margin 0.2s ease-out;-moz-transition: margin 0.2s ease-out;-khtml-transition: margin 0.2s ease-out;} .css:hover{margin-left:10px;}

彩色网页速变黑白

html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%); -o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}

渐变式(雨滴)返回顶部

.back2top{-webkit-animation:color-change 2s linear infinite alternate both;animation:color-change 2s linear infinite alternate both;width:35px;height:35px;border-top-right-radius:22px;border-bottom-right-radius:22px;border-bottom-left-radius:22px;box-shadow:0 1px 1px rgba(0,0,0,.2);-webkit-transition:all ease .4s;-moz-transition:all ease .4s;-o-transition:all ease .4s;transition:all ease .4s;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-ms-transform:rotate(45deg);}
@keyframes color-change{0%{background:#19dcea}100%{background:#b22cff}}
@-webkit-keyframes color-change{0%{background:#19dcea}100%{background:#b22cff}}

博客logo扫光特效

<style type="text/css">
.site-logo{
position: relative;
overflow: hidden;
float:left;
max-height: 50px;
}
.site-logo:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: blink 1s ease-in 1s infinite;
  animation: blink 1s ease-in 1s infinite;
}
 
@-webkit-keyframes blink {
  from {left: 10px;top: 0;}
  to {left: 320px;top: 0;}
}
@-o-keyframes blink {
  from {left: 10px;top: 0;}
  to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
  from {left: 10px;top: 0;}
  to {left: 320px;top: 0;}
}
@keyframes blink {
  from {left: -100px;top: 0;}
  to {left: 320px;top: 0;}
}</style>
<div class="site-logo">
<a  href="/" rel="home" itemprop="url">
 <img src="https://wlhrt.cn/logo.png" alt="logo" itemprop="logo" width="150" height="50">
</a>
</div>

JS代码

Tooltip提示效果¹

jQuery(document).ready(function($) {
  var sweetTitles = {
      tipElements: ".post img,a",//将需要显示效果的元素添加在内
      noTitle: false,
      init: function() {
          var noTitle = this.noTitle;
          $(this.tipElements).each(function() {
              $(this).mouseover(function(e) {
                  if (noTitle) {
                      isTitle = true;
                  } else {
                      isTitle = $.trim(this.title) != '';
                  }
                  if (isTitle) {
                      this.myTitle = this.title;
                      this.title = "";
                      var tooltip = "<div id='tooltip'><p>" + this.myTitle + "</p></div>";
                      $('body').append(tooltip);
                      $('#tooltip').css({
                          "top": (e.pageY + 35) + "px",
                          "left": (e.pageX - 10) + "px"
                      }).show('fast');
                  }
              }).mouseout(function() {
                  if (this.myTitle != null) {
                      this.title = this.myTitle;
                      $('#tooltip').remove();
                  }
              }).mousemove(function(e) {
                  $('#tooltip').css({
                      "top": (e.pageY + 35) + "px",
                      "left": (e.pageX - 10) + "px"
                  });
              });
          });
      }
  };
  $(function() {
      sweetTitles.init();
  });
});

Tippy Tooltip DEMO↗(target=_blank)

VI极简灯箱插件²

(function ($) {
  $.extend({
      viewImage: function (options) {
          var setting = $.extend({
              'target': '',
              'exclude': '',
              'delay': 300
          }, options);
          $(setting.exclude).attr("view-image", false);
          $(setting.target).click(function () {
              var src = $(this).attr('src'),
                  href = $(this).attr('href'),
                  url = '',
                  vicss = "<style class='view-image-css'>.view-img{position:fixed;background:#000;background:rgba(0,0,0,.8);width:100%;height:100%;top:0;left:0;text-align:center;padding:2%;z-index:999;cursor: zoom-out}.view-img img,.view-img span{max-width:100%;max-height:100%;position:relative;top:50%;transform: translateY(-50%);}.view-img img{animation:view-img-show .8s -0.1s ease-in-out}.view-img span{height:2em;color:#AAB2BD;overflow:hidden;position:absolute;top:50%;left:0;right:0;width:120px;text-align:center;margin:-1em auto;}.view-img span:after{content:'';position:absolute;bottom:0;left:0;transform: translateX(-100%);width:100%;height:2px;background:#3274ff;animation:view-img-load .8s -0.1s ease-in-out infinite;}@keyframes view-img-load{0%{transform: translateX(-100%);}100%{transform: translateX(100%);}}@keyframes view-img-show{0%{opacity:0;}100%{opacity:1;}}</style>";
              if (!$(this).attr("view-image") && !$(this).attr("rel")) {
                  url = src ? src : href;
                  $("body").append(vicss + "<div class='view-img'><span>loading...</span></div>");
                  setTimeout(function () {
                      var obj = new Image();
                      obj.src = url;
                      obj.onload = function () {
                          //console.log("Width:" + obj.width + " Height:" + obj.height);
                          $(".view-img").html("<img src=" + this.src + ">");
                      }
                      $('.view-img').click(function () {
                          $('.view-image-css').remove();
                          $(this).remove();
                      });
                  }, setting.delay);
                  return false;
              }
          });
          return;
      }
  });
})(jQuery);

//初始化方式
jQuery(document).ready(function () {
  jQuery.viewImage({
      'target' : '.view-image img', //需要使用ViewImage的图片
      'exclude': '.exclude img',    //要排除的图片
       'delay'  : 300                //延迟时间
 });
});

Timeago插件³

(function(a) {
  a.extend({
      lately: function(e) {
          function l(a) {
              a = new Date(a);
              a = ((new Date).getTime() - a.getTime()) / 1E3;
              var b = a / 60
                , d = b / 60
                , e = d / 24
                , f = e / 30
                , g = f / 12
                , h = Math.floor;
              return (1 <= g ? h(g) + c.lang.year : 1 <= f ? h(f) + c.lang.month : 1 <= e ? h(e) + c.lang.day : 1 <= d ? h(d) + c.lang.hour : 1 <= b ? h(b) + c.lang.minute : 1 <= a ? h(a) + c.lang.second : c.lang.error) + c.lang.ago
          }
          var c = a.extend({
              target: "",
              lang: {
                  second: "\u79d2",
                  minute: "\u5206\u949f",
                  hour: "\u5c0f\u65f6",
                  day: "\u5929",
                  month: "\u4e2a\u6708",
                  year: "\u5e74",
                  ago: "\u524d",
                  error: "NaN"
              }
          }, e);
          e = a(c.target);
          for (var k = 0; k < e.length; k++) {
              var d = a(e[k])
                , b = "";
              if (a(d).is(":visible")) {
                  var b = a(d).attr("datetime")
                    , f = a(d).attr("title")
                    , g = a(d).html();
                  if (!b || isNaN(new Date(b = b.replace(/(.*)[a-z](.*)\+(.*)/gi, "$1 $2").replace(/-/g, "/"))))
                      if (f && !isNaN(new Date(f = f.replace(/-/g, "/"))))
                          b = f;
                      else if (g && !isNaN(new Date(g = g.replace(/-/g, "/"))))
                          b = g;
                      else
                          break;
                  a(d).html(l(b))
              }
          }
      }
  })
})(jQuery);

//初始化方式
 jQuery(document).ready(function () {
   $.lately({
       'target' : '.lately-a,.lately-b' //需要显示效果的元素
   });
 });

Ajax Loading
不贴代码了，直接上地址:spin.js(target=_blank)，附带赠送一个在线设计ajax loading gif 的网址:ajaxload(target=_blank)。
侧边栏固定( Theia Sticky Sidebar)
Theia Sticky Sidebar 就可以让网站的所有侧边栏，在网页上下滚动时，永久可见，类似于固定侧边栏。大家可以看看下面的演示：代码下载(target=_blank)，DEMO(target=_blank)
响应式幻灯片(slick)
一个实用的响应式幻灯片 jQuery 插件「Slick」。代码下载(target=_blank)，DEMO(target=_blank)
Simple Gallery
一款jQuery灯箱插件，同时这款插件采用 Bootstrap 框架的代码结构，让相册实现自适应的效果。代码下载(target=_blank)，DEMO(target=_blank)
Viewer.js
一款强大的图片查看器。支持移动设备触摸事件，支持响应式，支持放大/缩小，支持旋转（类似微博的图片旋转），支持水平/垂直翻转，支持图片移动，支持键盘，支持全屏幻灯片模式（可做屏保），支持缩略图，支持标题显示，支持多种自定义事件等。代码下载(target=_blank)，DEMO1(target=_blank)，DEMO2(target=_blank)

圆形百分比返回顶部

//JS部分
var bigfa_scroll = {
  drawCircle: function(id, percentage, color) {
      var width = jQuery(id).width();
      var height = jQuery(id).height();
      var radius = parseInt(width / 2.20);
      var position = width;
      var positionBy2 = position / 2;
      var bg = jQuery(id)[0];
      id = id.split("#");
      var ctx = bg.getContext("2d");
      var imd = null;
      var circ = Math.PI * 2;
      var quart = Math.PI / 2;
      ctx.clearRect(0, 0, width, height);
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.lineCap = "square";
      ctx.closePath();
      ctx.fill();
      ctx.lineWidth = 3;
      imd = ctx.getImageData(0, 0, position, position);
      var draw = function(current, ctxPass) {
          ctxPass.putImageData(imd, 0, 0);
          ctxPass.beginPath();
          ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
          ctxPass.stroke();
      }
      draw(percentage / 100, ctx);
  },
  backToTop: function($this) {
      $this.click(function() {
          jQuery("body,html").animate({
              scrollTop: 0
          },
          800);
          return false;
      });
  },
  scrollHook: function($this, color) {
      color = color ? color: "#000000";
      $this.scroll(function() {
          var docHeight = (jQuery(document).height() - jQuery(window).height()),
          $windowObj = $this,
          $per = jQuery(".per"),
          percentage = 0;
          defaultScroll = $windowObj.scrollTop();
          percentage = parseInt((defaultScroll / docHeight) * 100);
          var backToTop = jQuery("#backtoTop");
          if (backToTop.length > 0) {
              if ($windowObj.scrollTop() > 200) {
                  backToTop.addClass("button--show");
              } else {
                  backToTop.removeClass("button--show");
              }
              $per.attr("data-percent", percentage);
              bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
          }
      });
  }
}
jQuery(document).ready(function() {
  jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
  var T = bigfa_scroll;
  T.backToTop(jQuery("#backtoTop"));
  T.scrollHook(jQuery(window), "#1E90FF");
});

//CSS部分
#backtoTop{background-color:#eee;border-radius:100%;bottom:10%;height:48px;position:fixed;right:-100px;width:48px;transition:0.5s;-webkit-transition:0.5s}
#backtoTop.button--show{right:10px}
.per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#555;cursor:pointer}
.per:before{content:attr(data-percent)}
.per:hover:before{content:"↑";font-size:20px}

非本站链接新窗口打开

$(function(){
  $("#容器").find("a").each(function(a){
      var href = $(this).attr("href");
      if(window.document.location.host.indexOf(href)==-1 && !$(this).attr("target")){
          $(this).attr("target","_blank");
          $(this).attr("rel","noreferrer");
      }
  })
})

最后更新于：2021-11-28 20:24:40 星期日

提示的CSS样式需自行编写美化，如#tooltip{ }，#tooltip p{ }。 ↩
作者：Tokin。基于jQuery不足 1kb 的响应式极简灯箱插件。示例(target=_blank) ↩
作者：Tokin。基于jQuery ，仅 800 字节却强大、好用的'Timeago'插件。示例(target=_blank)；也可使用另外一个，支持自动实时更新。示例(target=_blank) ↩