• 博客园相关

    其实都是胡乱偷的

    一、框架

    　　主要来源——Zsnuo

    　　　　　　Ps:博主调了好久的，这对不起她qaq，希望她能看到吧

    二、各种杂名称

    主要使用翻译侠以及百度翻译

    三、各种图出处

    堆糖

    四、存图

    SM.MS

    五、计数器

    amazingcounters

    很良心，也有很多的样式

    六、雪花特效

    FEWY（略眼熟

    <!DOCTYPE html>
<html lang="en">
<body>
    <script>
        function snow() {
            //  1、定义一片雪花模板
            var flake = document.createElement('div');
            // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
            flake.innerHTML = '❆';
            flake.style.cssText = 'position:absolute;color:#FFFAFA;';

            //获取页面的高度 相当于雪花下落结束时Y轴的位置
            var documentHieght = window.innerHeight;
            //获取页面的宽度，利用这个数来算出，雪花开始时left的值
            var documentWidth = window.innerWidth;

            //定义生成一片雪花的毫秒数
            var millisec = 100;
            //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
            setInterval(function() { //页面加载之后，定时器就开始工作
                //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
                var startLeft = Math.random() * documentWidth;

                //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
                var endLeft = Math.random() * documentWidth;

                //随机生成雪花大小
                var flakeSize = 5 + 20 * Math.random();

                //随机生成雪花下落持续时间
                var durationTime = 80000 + 11000 * Math.random();

                //随机生成雪花下落 开始 时的透明度
                var startOpacity = 0.7 + 0.3 * Math.random();

                //随机生成雪花下落 结束 时的透明度
                var endOpacity = 0.2 + 0.2 * Math.random();

                //克隆一个雪花模板
                var cloneFlake = flake.cloneNode(true);

                //第一次修改样式，定义克隆出来的雪花的样式
                cloneFlake.style.cssText += `
                        left: ${startLeft}px;
                        opacity: ${startOpacity};
                        font-size:${flakeSize}px;
                        top:-25px;
                            transition:${durationTime}ms;
                    `;

                //拼接到页面中
                document.body.appendChild(cloneFlake);

                //设置第二个定时器，一次性定时器，
                //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
                setTimeout(function() {
                    //第二次修改样式
                    cloneFlake.style.cssText += `
                                left: ${endLeft}px;
                                top:${documentHieght}px;
                                opacity:${endOpacity};
                            `;

                    //4、设置第三个定时器，当雪花落下后，删除雪花。
                    setTimeout(function() {
                        cloneFlake.remove();
                    }, durationTime);
                }, 0);

            }, millisec);
        }
        snow();
    </script>
</body>
</html>
    View Code
    <div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/zxqxwnngztxx/xue.js"></script>
<!--PageEndHtml Block End-->
</body>
</html>
    View Code 2
    /*雪花css*/
#Snow{
    position: fixed;
    top: 0;
    left: 0;
     100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255,255,240,0.1);
    pointer-events: none;
}
/*雪花css  end*/
    View Code 2 续

    七、动态标题

    <script>  
// 浏览器标题切换  
var OriginTitile = document.title;    // 保存之前页面标题  
var titleTime;  
document.addEventListener('visibilitychange', function(){  
    if (document.hidden){  
        document.title = '喔唷   ￣ω￣=  不小心崩溃辣~';  
        clearTimeout(titleTime);  
    }else{  
        document.title = '呀! (o°ω°o)又好啦~ ';  
        titleTime = setTimeout(function() {  
            document.title = OriginTitile;  
        }, 2000); // 2秒后恢复原标题  
    }  
});  
</script>
    View Code

    八、评论图片旋转

    　　　　注:附带表情包

    /*头像旋转*/
.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
 
.feedbackCon img {
border-radius: 40px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
    View Code

    九、移动端适配

    @media (max- 601px) {
    #home {
        min- 0;
    }
    #home #header {
         100%;
        position: fixed;
        display: block;
    }
    #home #header #blogTitle {
        background-position: left top;
    }
    #home #header #navigator {
        font-size: 15px;
        /* border-bottom: 1px solid #ededed; */
        /* border-top: 1px solid #ededed; */
        height: 35px;
        clear: both;
        /* margin-top: 25px; */
        /* margin: 0px 20px; */
         100%;
        /* float: left; */
        background: #222;
        margin: 0;
    }
    #home #header #navigator > ul#navList {
        height: 35px;
    }
    #home #header #navigator > ul#navList>li {
        height: 35px;
        margin: 0;
    }
    #home #header #navigator > ul#navList>li>a {
        height: 35px;
        line-height: 35px;
    }
    #home #header #navigator .blogStats {
        height: 35px;
        line-height: 35px;
    }
    #home #main {
        position: relative;
        min- 0;
        margin-top: 250px;
        bottom: 60px;
    }
    #home #main #mainContent {
        position: relative;
        float: none;
        margin: 0;
    }
    #home #main #mainContent .forFlow {
        margin: 0;
    }
    #home #main #mainContent div.commentform input.author {
         100px;
    }
    #home #main #mainContent div.commentform textarea.comment_textarea {
         100%;
    }
    #home #main #sideBar {
        display: none;
    }
    #home #main .postBody #cnblogs_post_body img {
         100%;
    }
}

@media (min- 402px) and (max- 601px) {
    #navigator > ul#navList {
        animation:
            arrowup 10s linear 0 infinite alternate;
        -webkit-animation:
            arrowup 10s linear 0 infinite alternate;
        -moz-animation:
            arrowup 10s linear 0 infinite alternate;
    }
    @-webkit-keyframes arrowup {
        0% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        25% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
        100% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
    }
}

@media (min- 302px) and (max- 401px) {
    #navigator > ul#navList {
    animation:
        arrowup 15s linear 0 infinite alternate;
    -webkit-animation:
        arrowup 15s linear 0 infinite alternate;
    -moz-animation:
        arrowup 15s linear 0 infinite alternate;
    }
    @-webkit-keyframes arrowup {
        0% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        15% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        30% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
        45% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
        60% {
            transform: translate3d(0, -84px, 0);
            -webkit-transform: translate3d(0, -84px, 0);
            -moz-transform: translate3d(0, -84px, 0);
        }
        100% {
            transform: translate3d(0, -84px, 0);
            -webkit-transform: translate3d(0, -84px, 0);
            -moz-transform: translate3d(0, -84px, 0);
        }
    }
}
@media (min- 202px) and (max- 301px) {
    #navigator > ul#navList {
        animation:
            arrowup 20s linear 0 infinite alternate;
        -webkit-animation:
            arrowup 20s linear 0 infinite alternate;
        -moz-animation:
            arrowup 20s linear 0 infinite alternate;
    }
    @-webkit-keyframes arrowup {
        0% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        12% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        24% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
        36% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
        48% {
            transform: translate3d(0, -84px, 0);
            -webkit-transform: translate3d(0, -84px, 0);
            -moz-transform: translate3d(0, -84px, 0);
        }
        60% {
            transform: translate3d(0, -84px, 0);
            -webkit-transform: translate3d(0, -84px, 0);
            -moz-transform: translate3d(0, -84px, 0);
        }
        72% {
            transform: translate3d(0, -126px, 0);
            -webkit-transform: translate3d(0, -126px, 0);
            -moz-transform: translate3d(0, -126px, 0);
        }
        100% {
            transform: translate3d(0, -126px, 0);
            -webkit-transform: translate3d(0, -126px, 0);
            -moz-transform: translate3d(0, -126px, 0);
        }
    }
}

@media (max- 201px) {
    #navigator > ul#navList {
        animation:
            arrowup 20s linear 0 infinite alternate;
        -webkit-animation:
            arrowup 20s linear 0 infinite alternate;
        -moz-animation:
            arrowup 20s linear 0 infinite alternate;
    }
    @-webkit-keyframes arrowup {
        0% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        6% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        12% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
        }
        18% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
        24% {
            transform: translate3d(0, -42px, 0);
            -webkit-transform: translate3d(0, -42px, 0);
            -moz-transform: translate3d(0, -42px, 0);
        }
        30% {
            transform: translate3d(0, -84px, 0);
            -webkit-transform: translate3d(0, -84px, 0);
            -moz-transform: translate3d(0, -84px, 0);
        }
        36% {
            transform: translate3d(0, -84px, 0);
            -webkit-transform: translate3d(0, -84px, 0);
            -moz-transform: translate3d(0, -84px, 0);
        }
        42% {
            transform: translate3d(0, -126px, 0);
            -webkit-transform: translate3d(0, -126px, 0);
            -moz-transform: translate3d(0, -126px, 0);
        }
        48% {
            transform: translate3d(0, -126px, 0);
            -webkit-transform: translate3d(0, -126px, 0);
            -moz-transform: translate3d(0, -126px, 0);
        }
        54% {
            transform: translate3d(0, -168px, 0);
            -webkit-transform: translate3d(0, -168px, 0);
            -moz-transform: translate3d(0, -168px, 0);
        }
        60% {
            transform: translate3d(0, -168px, 0);
            -webkit-transform: translate3d(0, -168px, 0);
            -moz-transform: translate3d(0, -168px, 0);
        }
        66% {
            transform: translate3d(0, -210px, 0);
            -webkit-transform: translate3d(0, -210px, 0);
            -moz-transform: translate3d(0, -210px, 0);
        }
        72% {
            transform: translate3d(0, -210px, 0);
            -webkit-transform: translate3d(0, -210px, 0);
            -moz-transform: translate3d(0, -210px, 0);
        }
        78% {
            transform: translate3d(0, -252px, 0);
            -webkit-transform: translate3d(0, -252px, 0);
            -moz-transform: translate3d(0, -252px, 0);
        }
        84% {
            transform: translate3d(0, -252px, 0);
            -webkit-transform: translate3d(0, -252px, 0);
            -moz-transform: translate3d(0, -252px, 0);
        }
        90% {
            transform: translate3d(0, -296px, 0);
            -webkit-transform: translate3d(0, -296px, 0);
            -moz-transform: translate3d(0, -296px, 0);
        }
        100% {
            transform: translate3d(0, -296px, 0);
            -webkit-transform: translate3d(0, -296px, 0);
            -moz-transform: translate3d(0, -296px, 0);
        }
    }
}
    View Code

    十、鼠标点击以及样式

    <script type="text/javascript"> 
/* 鼠标特效 */ 
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("Hello","World"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "rgb(72,85,137)" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>
    View Code
    a:hover { cursor:url("http://www.005.tv/templets/muban/moe_style/image/cur/2.cur"),auto;}
body { cursor:url("http://www.005.tv/templets/muban/moe_style/image/cur/1.cur"),auto;}
    View Code

    十一、生成目录

    <script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
var mainContent = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(mainContent.length < 1)
    return;

if(h2_list.length>0)
{
    var content = '<a name="_labelTop"></a>';
    content += '<div id="navCategory">';
    content += '<p style="font-size:18px"><b>LIST</b></p>';
    content += '<ul>';
    for(var i=0; i<h2_list.length; i++)
    {
        var go_to_top = '<div style="text-align: right"><a href="#_labelTop">Return Top</a><a name="_label' + i + '"></a></div>';
        $(h2_list[i]).before(go_to_top);
        var h3_list = $(h2_list[i]).nextAll("h3");
        var li3_content = '';
        for(var j=0; j<h3_list.length; j++)
        {
            var tmp = $(h3_list[j]).prevAll('h2').first();
            if(!tmp.is(h2_list[i]))
                break;
            var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
            $(h3_list[j]).before(li3_anchor);
            li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
        }
        var li2_content = '';
        if(li3_content.length > 0)
            li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
        else
            li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
        content += li2_content;
    }
    content += '</ul>';
    content += '</div><p>&nbsp;</p>';
    if($('#cnblogs_post_body').length != 0 )
    {
        $($('#cnblogs_post_body')[0]).prepend(content);
    }
}   
$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>
    View Code

    十二、返回顶部

    <style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
      50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png)no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
    View Code
  • 相关阅读:
    进击的UI------------UIToolBar(bottom导航条)
    进击的UI-------------------UIPageControl(滑动控制)
    进击的UI---------------------UIStepper(加减)
    进击的UI--------------UIActionSheet(提示)
    python生成固定格式且不会重复的用户名
    python多判断if，elif语句优化
    python代码出现异常，自动重新运行
    批处理+adb命令实现Android截图小工具
    python爬取百度图片后自动上传
    map和filter函数
  • 原文地址：https://www.cnblogs.com/zxqxwnngztxx/p/7911374.html
Copyright © 2020-2023  润新知