代码收集贴

本文专门收集一些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提示效果 1
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↗

  • VI极简灯箱插件 2

(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插件 3
(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 ,附带赠送一个在线设计ajax loading gif 的网址: ajaxload

  • 侧边栏固定( Theia Sticky Sidebar)

Theia Sticky Sidebar 就可以让网站的所有侧边栏,在网页上下滚动时,永久可见,类似于固定侧边栏。大家可以看看下面的演示: 代码下载DEMO

  • 响应式幻灯片(slick)

一个实用的响应式幻灯片 jQuery 插件「Slick」。 代码下载DEMO

  • Simple Gallery

一款jQuery灯箱插件,同时这款插件采用 Bootstrap 框架的代码结构,让相册实现自适应的效果。 代码下载DEMO

  • Viewer.js

一款强大的图片查看器。支持移动设备触摸事件,支持响应式,支持放大/缩小,支持旋转(类似微博的图片旋转),支持水平/垂直翻转,支持图片移动,支持键盘,支持全屏幻灯片模式(可做屏保),支持缩略图,支持标题显示,支持多种自定义事件等。 代码下载DEMO1DEMO2

  • 圆形百分比返回顶部
//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}

  1. 提示的CSS样式需自行编写美化,如#tooltip{ }#tooltip p{ }  

  2. 作者:Tokin。基于jQuery不足 1kb 的响应式极简灯箱插件。 示例  

  3. 作者:Tokin。基于jQuery ,仅 800 字节却强大、好用的'Timeago'插件。 示例 ;也可使用另外一个,支持自动实时更新。 示例  

本文最后一次更新时间:

Comments
Write a Comment
  • 这个是针对图片的高斯模糊吗?

    • @小F 不止图片,像文本等其他类的元素也可以。