分类 代码 下的文章

网站雪花特效

<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
    var sf = new Snowflakes({
    color: "#FFFFFF",
    count: 66,
    minOpacity: 0.3,
    maxOpacity: 1
});
</script>

效果预览见本站点

jQuery - textarea 自适应内容高度

<textarea id="textarea"></textarea>
<script>
function makeExpandingArea(el) {
    var setStyle = function(el) {
        el.style.height = 'auto';
        el.style.height = el.scrollHeight + 'px';
        // console.log(el.scrollHeight);
    }
    var delayedResize = function(el) {
        window.setTimeout(function() {
            setStyle(el);
        },
        0);
    }
    if (el.addEventListener) {
        el.addEventListener('input',function() {
            setStyle(el);
        },false);
        setStyle(el);
    } else if (el.attachEvent) {
        el.attachEvent('onpropertychange',function() {
            setStyle(el);
        });
        setStyle(el);
    }
    if (window.VBArray && window.addEventListener) { //IE9
        el.attachEvent("onkeydown",function() {
            var key = window.event.keyCode;
            if (key == 8 || key == 46) delayedResize(el);
        });
        el.attachEvent("oncut",function() {
            delayedResize(el);
        }); //处理粘贴
    }
}
makeExpandingArea(textarea);
</script>

阅读全文

CSS - 中间含数字的圆圈

12

<span style="width:17px;height:17px;top:17px;line-height:17px;border-radius:15px;font-size:12px;background:#FF0000;color:#FFFFFF;">12</span>