首页 > 代码库 > 24为师网页的分析
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>
24为师网页的分析
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。