你的位置:首页 > Java教程

[Java教程]24为师网页的分析


  24为师网站地址:https://24ways.org/,比较突出的效果就是右上角翻页出现作者头像的效果,见猎心喜,于是模仿写了一个,没有用animate,辛勤的你可以优化一下,顺便指点下。

  实现的效果:1.当鼠标位于文章上方时,右上角翻页,出现作者头像。

        2.文章高度自适应

  以下是代码(调代码用的时间太长了,好累,css内嵌在style里,脚本内嵌在script里都不长,内容比较长的是文档结构,博客就懒得美化了)

<!DOCTYPE html><html>  <head>    <title>pageRight</title>    <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <script src="https://common.cnblogs.com/script/jquery.js"></script>   <style>     *{       box-sizing: border-box;     }     html{       background: gray;     }     h3,     p{       font-family: Helvetica, Arial;       font-size: 16px;     }     h3{       color: #275C83;       font-size: 2em;       width: 5em;     }     ol{       list-style:none;     }     li{       display: list-item;       float: left;     }     div.content{       margin-top: 0;       padding-top: 20px;     }     div.article{       display: inline-block;       margin-top: 0;       margin-right: 50px;       padding-left: 1em;       width: 400px;       background: white;     }     .writer{       position: relative;     }     .writer .mask{       display: block;       position: absolute;       top: 0;       right: 0;       width: 100px;       height: 100px;       border-bottom: 100px solid white;       border-right: 100px solid #bbb;       z-index: 2;     }     .mask     .writer a{       position: absolute;       height: 100px;       width: 100px;       top: 0;       right: 0;       display: block;     }     .writer .pic{       position: absolute;       top: 0;       right: 0;       display: block;       width: 6em;       height: 6em;       background: url("http://images.cnblogs.com/cnblogs_com/carryme15/869262/o_swirl_pattern.png") no-repeat;       z-index: 1;     }   </style> </head> <body>  <div class="content">   <ol>     <li>       <div class="article">         <div class="writer">           <div class="mask"></div>           <div class="pic"></div>         </div>         <h3>No One Fight</h3>         <p>sfasdfsdfsfdsfs</p>         <p>sitdown go aford sha kima shag</p>         <p>sfasdfsdfsfdsfs</p>         <p>sitdown go aford sha kima shag</p>         <p>sfasdfsdfsfdsfs</p>         <p>sitdown go aford sha kima shag</p>         <p>sfasdfsdfsfdsfs</p>       </div>     <li>       <div class="article">         <div class="writer">           <div class="mask"></div>           <div class="pic"></div>         </div>         <h3>Good Man Die</h3>         <p>sitdown go aford sha kima shag</p>         <p>sfasdfsdfsfdsfs</p>       </div>     </li>   </ol>  </div>   <script>     $(document).ready(function(){       //height auto高度自适应       var ars = $(".article");       $.each(ars,function(i,a){         if(i%2==0){           if($(a).height()>$(ars).eq(i+1).height()){             $(ars).eq(i+1).height($(a).height());           }           else{             $(a).height($(ars).eq(i+1).height());           }         }       });       //hover特效       $(".article").hover(function(){          $(this).find(".mask").css({"borderBottom": "100px solid #CA1111",        "borderRight": "100px solid transparent"});        },       function(){          $(this).find(".mask").css({"border-bottom": "100px solid white",          "border-right": "100px solid #bbb"});        });     });   </script> </body></html>