zoukankan      html  css  js  c++  java
  • 博客园自定义样式

    CSS

    /*好看的滚动条*/
    ::-webkit-scrollbar{
        width:10px!important;
        height:10px!important;
        -webkit-appearance:none;
    }
    ::-webkit-scrollbar-thumb{
        height:5px;border:1px solid transparent;
        border-top:none;border-bottom:none;
        -webkit-border-radius:6px;
        background-color:rgba(0,0,0,.3);
        background-clip:padding-box;
    }
    /*目录样式*/
    #sideCatalog a{
      font-size:12px;
      font-weight:normal !important;
    }
    
    #sideCatalog li {
      background-color: #F0FFF0;
    }
    
    #sideCatalog {
      opacity:0.73;
    }
    
    #sideCatalog a:hover{
      color:#8B0000;
    }
    /*本来想设置Header1_HeaderTitle*/
      h1 a:hover {
        text-decoration: none;
        margin-left: 20px;
      }
      h1 a:link,
      h1 a:visited,
     h1 a:active {
        transition: all 0.4s linear 0s;
        color:chocolate;
      }
    /*取消超链接下划线*/
    span a:link {
    text-decoration: none;
    }
    span a:visited {
    text-decoration: none;
    }
    span a:hover {
    text-decoration: none;
    }
    span a:active {
     text-decoration: none;
    }
    /*返回顶部*/
    #back-to-top {
        background-color: #8bcc99;
        bottom: 10px;
        box-shadow: 0 0 6px #72a072;
        padding: 5px 10px;
        position: fixed;
        right: 90px;
        border-radius: 8px;
        opacity: 0.7;
        font-weight:bold;
    }
    
    /*侧边栏样式*/
    #fry_append {
        right: 1%;
        width: 46px;
        top: 27%;
        left: 88%;
        opacity: 0.37; 
        position: fixed;
        z-index: 98;
        background-color: #fff;
        font-size: 12px;
        margin: 10px 0 0;
        padding: 5px;
        border: 1px solid #55895b;
        border-radius: 5px;
        float: right;
    }
    #fry_append div:first-of-type {
        margin-top: 5px;
    }
    
    #fry_append div {
        text-align: center;
        cursor: pointer;
        margin-top: 10px;
        color: #CC9966;
    }
    
    /*取消底部广告*/
    #ad_t2 {
        display: none;
    }
    .c_ad_block {
        display: none;
    }
    
    /*标题h2的自定义格式*/
    #cnblogs_post_body h2  {
        border: 1px solid #55895B;
        border-left-width: 5px;
        border-radius: 10px;
        border-right-width: 5px;
        background-color: #FBF9F9;
        background-position: left center;
        padding: 3px 5px;
        width: 75%;
        display: inline-block;
        box-sizing: border-box;
        font-size:24px;
        text-align:center;
    }
    
    /*标题h3的自定义格式*/
    #cnblogs_post_body h3  {
        border: 1px solid #696969;
        border-left-width: 5px;
        border-radius: 7px;
        border-right-width: 5px;
        background-color: #F5F5F5;
        background-position: left center;
        padding: 2px 20px;
        width: auto%;
        display: inline-block;
        box-sizing: border-box;
        font-size:18px;
    }
    
    /*标题h4的自定义格式*/
    #cnblogs_post_body h4  {
        border: 1px solid burlywood;
        border-left-width: 5px;
        border-radius: 7px;
        border-right-width: 5px;
        background-color: #F5F5F5;
        background-position: left center;
        padding: 2px 20px;
        width: auto;
        display: inline-block;
        box-sizing: border-box;
        font-size:16px;
       margin-left: 31px;
       
    }
    
    /*代码部分格式*/
    .cnblogs_code{background-color:#f5f5f5;font-family:Courier New !important;font-size:15px !important;
        padding:5px;overflow:auto;margin:5px 0;color:#000;
        border: 1px solid chocolate;
        border-width: 1px;
        border-radius: 7px;
        background-position: left center;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        padding:10px
    }
    .cnblogs_code pre{font-family:Courier New !important;font-size:15px !important;word-wrap:break-word;
        white-space:pre-wrap}
    .cnblogs_code span{font-family:Courier New !important;font-size:15px !important;line-height:1.5 !important}
    /*a.postTitle*/
    a.postTitle2{color:#000;font-size:25px;}
    a.postTitle2:hover{color:cornflowerblue}
    /* 文章title自定义带动画样式 */
    #topics .postTitle,{
      margin-top: 3px;
      margin-bottom: 3px;
      font-size: 25px;
      color: #21759b;
    }
    /*title*/
    .postTitle {
      font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
      clear: both;
      border: 2px solid brown;
      border-left-width: 5px;
      border-radius: 10px;
      border-right-width: 5px;
      background-color: #FBF9F9;
      background-position: left center;
      padding: 3px 5px;
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
      text-align:center;
      font-size:25px;
    border-height:30px;
    }
    .postTitle a:hover {
      text-decoration: none;
      margin-left: 20px;
      /*color:#FF0000;*/
    }
    .postTitle a:link,
    .postTitle a:visited,
    .postTitle a:active {
      transition: all 0.4s linear 0s;
    }
    /*子列*/
    .entrylistPosttitle {
      font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
      clear: both;
      border: 2px solid brown;
      border-left-width: 5px;
      border-radius: 10px;
      border-right-width: 5px;
      background-color: #FBF9F9;
      background-position: left center;
      padding: 3px 5px;
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
      text-align:center;
    font-size:25px;
    }
    .entrylistPosttitle a:hover {
      text-decoration: none;
      margin-left: 20px;
      /*color:#FF0000;*/
    }
    .entrylistPosttitle a:link,
    .entrylistPosttitle a:visited,
    .entrylistPosttitle a:active {
      transition: all 0.4s linear 0s;
    }
    
    /* 禁用下划线 */
    .postBody a:link, .postBody a:visited, .postBody a:active {
        text-decoration: none;
    }
    
    /*评论*/
    /*评论列表*/
    /*侧边栏和评论区更改*/
    .syntaxhighlighter a, 
    .syntaxhighlighter div,
     .syntaxhighlighter code,
     .syntaxhighlighter table, 
     .syntaxhighlighter table td,
     .syntaxhighlighter table tr,
     .syntaxhighlighter table tbody,
     .syntaxhighlighter table thead,
     .syntaxhighlighter table caption, 
     
     .syntaxhighlighter textarea {
    font-size: 14px!important;
    }
    /*评论区*/
    /*评论框*/
    div.commentform p{
    margin-bottom:10px;
    }
    /*评论按钮*/
    .comment_btn {
    padding: 5px 10px;
    height: 35px;
    width: 90px;
    border: 0 none;
    border-radius: 5px;
    background: #ddd;
    color: #999;
    cursor:pointer;
    font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
    text-shadow: 0 0 1px #fff;
    display: inline !important;
    }
    .comment_btn:hover{
    padding: 5px 10px;
    height: 35px;
    width: 90px;
    border: 0 none;
    border-radius: 5px;
    background: #258fb8;
    color: white;
    cursor:pointer;
    font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
    text-shadow: 0 0 1px #fff;
    display: inline !important;
    }
    #commentform_title {
    background-image:none;
    background-repeat:no-repeat;
    margin-bottom:10px;
    padding:0;
    font-size:24px;
    }
    #commentbox_opt,#commentbox_opt + p {
    text-align:center;
    }
    .commentbox_title {
    width: 100%;
    }
    /*评论输入域*/
    #tbCommentBody {
    font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
    margin-top:10px;
    max-width:100%;
    min-width:100%;
    background:white;
    color:#333;
    border:2px solid #fff;
    box-shadow:inset 0 0 8px #aaa;
    // padding:10px;
    height:250px;
    font-size:14px;
    min-height:120px;
    }
    /*评论条目*/
    .feedbackItem {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
    }
    .feedbackListSubtitle {
    font-weight:normal;
    }
    
    #blog-comments-placeholder, #comment_form {
    padding: 20px;
    background: #fff;
    -webkit-box-shadow: 1px 2px 3px #ddd;
    box-shadow: 1px 2px 3px #ddd;
    margin-bottom: 50px;
    }
    /*评论标题*/
    .feedback_area_title {
    margin-bottom: 15px;
    font-size: 1.8em;
    }
    .feedbackItem {
    border-bottom: 1px solid #CCC;
    margin-bottom: 10px;
    padding: 5px;
    background: rgb(248, 248, 248);
    }
    .color_shine {background: rgb(226, 242, 255);}
    .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
    
    #comment_form .title {
    font-weight: normal;
    margin-bottom: 15px;
    }
    
    /* 防止图片溢出 */
    #cnblogs_post_body img {
      max-width: 100%;
    }
    
    //如果没有bug可以忽略这一条
    /*溢出隐藏设置*/
    #topics, #mainContent {
        overflow: visible;
    }
    #postDesc {
        float: none;
    }
    /*编辑 收藏*/
    #topics .postDesc a {
        background-color: #51C332;
        border-radius: 3px;
        text-align: center;
        color: white;
        text-shadow: 1px 1px 2px #8B0000;
        padding: 3.7px 13px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
        margin: 10px 3px;
        box-shadow: black 0px 2px 8px;
    }
    /* 关注收藏等几个按钮 */
    #green_channel {
        padding: 5px 0 15px 0;
        margin-bottom: 10px;
        margin-top: 10px;
        border: 0;
        border-top: #eee 1px dashed;
        border-bottom: #eee 1px dashed;
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: rgb(238, 238, 238);
        font-size: 12px;
        width: 100%!important;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
    }
    
    a#green_channel_digg, a#green_channel_follow, a#green_channel_favorite, a#green_channel_weibo, a#green_channel_wechat {
        text-decoration: none;
        color: #fff;
        margin: auto;
        width: 80px;
        display: inline-block;
        line-height: 30px;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 2px;
        border-radius: 3px;
        text-transform: uppercase;
        transition: all .4s;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -ms-transition: all .4s;
        -o-transition: all .4s;
        position: relative;
        margin-left: 10px;
        background-image: none;
        margin-top: 10px;
    }
    a#green_channel_digg {
        background-color: #2daebf;
        box-shadow: 0 15px 18px -6px rgba(95,193,206,0.65);
    }
    
    a#green_channel_favorite {
        background-color: #ffb515;
        box-shadow: 0 15px 18px -6px rgba(255,198,75,0.65);
        margin-left: 10px;
    }
    a#green_channel_follow {
        background-color: #e33100!important;
        box-shadow: 0 15px 18px -6px rgba(227,49,0,0.65);
        margin-left: 10px;
    }
    
    a#green_channel_wechat {
        padding: 3px 8px!important;
        background-color: #3cb034!important;
        box-shadow: 0 15px 18px -6px rgba(60,176,52,0.65)!important;
        margin-left: 10px;
        width: 35px;
    }
    
    a#green_channel_weibo {
        padding: 3px 8px!important;
        background-color: #ff464b!important;
        box-shadow: 0 15px 18px -6px rgba(255,70,75,0.65)!important;
        margin-left: 10px;
        width: 35px;
    }
    
    /*下面的头像边框*/
    #author_profile_info img.author_avatar {
        border-radius: 100%;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
        border: 3px solid #f7f7f7;
        padding: 0;
        margin-left: 3px;
        margin-right: 7px;
    }
    
    
    /* 上一篇下一篇 */
    #post_next_prev {
        font-size: 14px;
        color: #535353;
    }
    /* 个性签名 */
    #MySignature {
        box-shadow: 8px 1px 10px #989898;
        padding: 10px;
        text-shadow: 1px 1px 1px #FFF;
        font-size: 15px;
        border:1px cornflowerblue;
        border-left: solid 5px cornflowerblue;
        background: #FBF9F9;
        border-radius: 10px 10px 37% 10px;
        line-height: 2.4;
        margin: 37px 0;
    }
    
    #MySignature a {
        text-decoration: none;
        color: #4183c4;
        font-weight: bold;
    }
    
    #MySignature a:hover {
        text-decoration: underline;
        color: #f60;
    }
    
    #MySignature span {
        color: #f60;
    }
    /*新加  头像 img 侧边圆圈*/
    #newsSideBar .headImage {
        padding: auto;
    }
    #newsSideBar .headImage img {
        border: 3px solid #C0C0C0;
        border-radius: 50%;
        width: 150px;
        margin: auto;
        display: block;
    }
    
    /*头像*/
    #blog-news > img {
        display: block;
        margin: auto;
        border-radius: 50%;
    }
    #profile_block {
        font-size: 15px;
        padding: 20px;
        line-height: 1.8;
    }
    #profile_block > a:link {
        color: #F60;
    }
    /*生成博客目录的CSS*/
    #uprightsideBar{
      font-size:12px;
      font-family:Arial, Helvetica, sans-serif;
      text-align:left;
      position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/
      top:250px;
    right:10px;
    
      width: auto;
      height: auto; 
      
    }
    #sideBarTab{
      float:left;
      width:60px; 
      height:20px;
      border:1px solid #e5e5e5;
      border-right:10px;
      background-color: gold;
      border-radius: 10px;
    opacity: 0.7;
    text-align:center;
    font-weight: bold;
    padding:10px;
    
    }
    
    #sideBarContents{
      float:left;
      overflow-y:scroll; 
      overflow-x:hidden;
      width:230px;
      min-height:108px;
      max-height:350px;
      border:1px solid #e5e5e5;
      border-right:none; 
      background: #ffffff;
      border-radius: 10px;
      opacity: 0.7;
      font-size:12px;
    font-weight: bold;
    }
    #sideBarContents dl{
      margin:0;
      padding:0;
    cursor: pointer;
    }
    
    #sideBarContents dt{
      margin-top:5px;
      margin-left:5px;]
      cursor: pointer;
     text-indent: 10px;
    font-size:15px;
    }
    
    #sideBarContents dd{
      cursor: pointer;
      text-indent: 30px;
    font-size:10px;
    }
    
    #sideBarContents dd:hover, dt:hover {
      color:#A7995A;
    }
    View Code

    侧边栏

    <div style = "display:none;">动态线条</div>
    <script>
    
    !function(){
    
    function n(n,e,t){
    
    return n.getAttribute(e)||t
    
    }
    
    function e(n){
    
    return document.getElementsByTagName(n)
    
    }
    
    function t(){
    
    var t=e("script"),o=t.length,i=t[o-1];
    
    return{
    
    l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.97),c:n(i,"color","220,20,60"),n:n(i,"count",37)
    
    }
    
    }
    
    function o(){
    
    a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
    
    c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
    
    }
    
    function i(){
    
    r.clearRect(0,0,a,c);
    
    var n,e,t,o,m,l;
    
    s.forEach(function(i,x){
    
    for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
    
    null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
    
    l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
    
    t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
    
    }),
    
    x(i)
    
    }
    
    var a,c,u,m=document.createElement("canvas"),
    
    d=t(),l="c_n"+d.l,r=m.getContext("2d"),
    
    x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
    
    function(n){
    
    window.setTimeout(n,1e3/45)
    
    },
    
    w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
    
    window.onmousemove=function(n){
    
    n=n||window.event,y.x=n.clientX,y.y=n.clientY
    
    },
    
    window.onmouseout=function(){
    
    y.x=null,y.y=null
    
    };
    
    for(var s=[],f=0;d.n>f;f++){
    
    var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
    
    }
    
    u=s.concat([y]),
    
    setTimeout(function(){i()},100)
    
    }();
    
    </script>
    <div style = "display:none;"> 动态线条end</div>
    
    <div id="newsSideBar">
         <div class="headImage">
             <img src="//pic.cnblogs.com/avatar/1527631/20181103125219.png" alt="头像">
         </div>
     </div>
    View Code

    页首

    <script type="text/javascript">
    var BlogDirectory = {
        /*
            获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top)
        */
        getElementPosition:function (ele) {        
            var topPosition = 0;
            var leftPosition = 0;
            while (ele){              
                topPosition += ele.offsetTop;
                leftPosition += ele.offsetLeft;        
                ele = ele.offsetParent;     
            }  
            return {top:topPosition, left:leftPosition}; 
        },
    
        /*
        获取滚动条当前位置
        */
        getScrollBarPosition:function () {
            var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
            return  scrollBarPosition;
        },
        
        /*
        移动滚动条,finalPos 为目的位置,internal 为移动速度
        */
        moveScrollBar:function(finalpos, interval) {
    
            //若不支持此方法,则退出
            if(!window.scrollTo) {
                return false;
            }
    
            //窗体滚动时,禁用鼠标滚轮
            window.onmousewheel = function(){
                return false;
            };
              
            //清除计时
            if (document.body.movement) { 
                clearTimeout(document.body.movement); 
            } 
    
            var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
    
            var dist = 0; 
            if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出
                window.onmousewheel = function(){
                    return true;
                }
                return true; 
            } 
            if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离
                dist = Math.ceil((finalpos - currentpos)/10); 
                currentpos += dist; 
            } 
            if (currentpos > finalpos) { 
                dist = Math.ceil((currentpos - finalpos)/10); 
                currentpos -= dist; 
            }
            
            var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
            window.scrollTo(0, currentpos);//移动窗口
            if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出
            {
                window.onmousewheel = function(){
                    return true;
                }
                return true;
            }
            
            //进行下一步移动
            var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
            document.body.movement = setTimeout(repeat, interval); 
        },
        
        htmlDecode:function (text){
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        },
    
        /*
        创建博客目录,
        id表示包含博文正文的 div 容器的 id,
        mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!),
        interval 表示移动的速度
        */
        createBlogDirectory:function (id, mt, st, interval){
             //获取博文正文div容器
            var elem = document.getElementById(id);
            if(!elem) return false;
            //获取div中所有元素结点
            var nodes = elem.getElementsByTagName("*");
            //创建博客目录的div容器
            var divSideBar = document.createElement('DIV');
            divSideBar.className = 'uprightsideBar';
            divSideBar.setAttribute('id', 'uprightsideBar');
            var divSideBarTab = document.createElement('DIV');
            divSideBarTab.setAttribute('id', 'sideBarTab');
            divSideBar.appendChild(divSideBarTab);
            var h2 = document.createElement('H2');
            divSideBarTab.appendChild(h2);
            var txt = document.createTextNode('目录导航');
            h2.appendChild(txt);
            var divSideBarContents = document.createElement('DIV');
            divSideBarContents.style.display = 'none';
            divSideBarContents.setAttribute('id', 'sideBarContents');
            divSideBar.appendChild(divSideBarContents);
            //创建自定义列表
            var dlist = document.createElement("dl");
            divSideBarContents.appendChild(dlist);
            var num = 0;//统计找到的mt和st
            mt = mt.toUpperCase();//转化成大写
            st = st.toUpperCase();//转化成大写
            //遍历所有元素结点
            for(var i=0; i<nodes.length; i++)
            {
                if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
                {
                    //获取标题文本
                    var nodetext = nodes[i].innerHTML.replace(/</?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签
                    nodetext = nodetext.replace(/&nbsp;/ig, "");//替换掉所有的&nbsp;
                    if(nodes[i].nodeName==mt){
                        nodetext='*'+nodetext;
                      }
                    nodetext = BlogDirectory.htmlDecode(nodetext);
                    //插入锚        
                    nodes[i].setAttribute("id", "blogTitle" + num);
                    var item;
                    switch(nodes[i].nodeName)
                    {
                        case mt:    //若为主标题 
                            item = document.createElement("dt");
                            break;
                        case st:    //若为子标题
                            item = document.createElement("dd");
                            break;
                    }
                    
                    //创建锚链接
                    var itemtext = document.createTextNode(nodetext);
                    item.appendChild(itemtext);
                    item.setAttribute("name", num);
                    item.onclick = function(){        //添加鼠标点击触发函数
                        var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                        if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                    };            
                    
                    //将自定义表项加入自定义列表中
                    dlist.appendChild(item);
                    num++;
                }
            }
            
            if(num == 0) return false; 
            /*鼠标进入时的事件处理*/
            divSideBarTab.onmouseenter = function(){
                divSideBarContents.style.display = 'block';
                $('#sideBarTab').css('display','none') ;
            }
            /*鼠标离开时的事件处理*/
            divSideBar.onmouseleave = function() {
                divSideBarContents.style.display = 'none';
                $('#sideBarTab').css('display','block') ;
            }
    
            document.body.appendChild(divSideBar);
        }
        
    };
    
    window.onload=function(){
        /*页面加载完成之后生成博客目录*/
        BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
    }
    </script>
    
    <span id="back-to-top"><a href="#top">返回顶部</a></span>
        <script type="text/javascript">
            $('span a').on('click', function() {
                    var targetOffset = $('#top').offset().top;
                    $('html, body').animate({scrollTop: targetOffset}, 500);
                    return false;
                 });
        </script>
    <span id="top"></span>
    
    <!--  页面HTML/JS部分 页面展开动画-->
    <div id="fry_append">
     
    <div id="fry_sidebar"><span style="color:black;font-weight: bold;">侧边栏</span></div>
    
    </div>
    <!-- 页面展开动画-->
    <script type="text/javascript">
    function my_unfold(){
        width_main=$('#main').width();
        height_main=$('#main').height();
        time=1000;
        function unfoldLeft(width,height,time) {
            $('#main').animate({
                'width': '0%',
                'height': '0%',
                opacity: '0'
            }, 0,'linear');
            $('#main').animate({
                'width': '+'+width_main,
                'height': '+'+height_main,
                opacity: '1'
            }, time,'linear');
        }
        unfoldLeft(width_main,height_main,time);
    }
    </script>
    
    <!--END 页面展开动画-->
            <!-- 展开侧边栏 -->
        <script type="text/javascript">
        $('#main').append('<div id="fry_append"><hr/><div id="fry_sidebar">侧边栏</div></div>');
        $('#fry_sidebar').click(function(){
            $('#topicList.forFlow').css({'margin-right':'0px'});
            if($('#sideBar').css('display')=='none'){
                $('#sideBar').css({'display':'block','width':'230px','margin':'none','float':'right'});
                $('#topicList').css({'display':'block','width':'740px'});
            }
            else{
                $('#sideBar').css({'display':'none'});
                $('#topicList').css({'display':'block','width':'100%','float':'center'});
        //这里可以适当的调整百分比,来满足页面的需求。。。最佳是100%宽度
            }
        });
    
    </script>
    <script src="https://files.cnblogs.com/files/astonc/mouse-click.js"></script>
    <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
    <script type="text/javascript">
    /*设置小心心*/
    (function(window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function() {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
                setTimeout(callback, 1000 / 60);
            }
        })();
        init();
        function init() {
            css(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }
        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }
        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function(event) {
                old && old();
                createHeart(event);
            }
        }
        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }
        function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch(ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }
        function randomColor() {
            return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";
        }
    })(window, document);
    </script>
    View Code

    页脚

    <!-- lightbox的样式/ 图片点击放大效果 -->
    <link href="https://files.cnblogs.com/files/astonc/img-css.css" rel="stylesheet">
    <!-- lightbox.js核心代码 -->
    <script src="https://files.cnblogs.com/files/astonc/img.js"></script>
    <script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script>
    <script type='text/javascript'>$(".code_img_closed").unwrap();</script>
    <script type='text/javascript'>$(".code_img_opened").unwrap();</script>
    View Code
  • 相关阅读:
    HDU 5791 Two (DP)
    POJ 1088 滑雪 (DPor记忆化搜索)
    LightOJ 1011
    POJ 1787 Charlie's Change (多重背包 带结果组成)
    HDU 5550 Game Rooms (ccpc2015 K)(dp)
    HDU 5542 The Battle of Chibi (ccpc 南阳 C)(DP 树状数组 离散化)
    HDU 5543 Pick The Sticks (01背包)
    HDU 5546 Ancient Go (ccpc2015南阳G)
    NB-IoT的DRX、eDRX、PSM三个模式 (转载,描述的简单易懂)
    MQTT 嵌入式端通讯协议解析(转)
  • 原文地址:https://www.cnblogs.com/astonc/p/11887885.html
Copyright © 2011-2022 走看看