24為師網站地址：https://24ways.org/，比較突出的效果就是右上角翻頁出現作者頭像的效果，見獵心喜，於是模仿寫了一個，沒有用animate，辛勤的你可以優化一下，順便指點下。 實現的效果：1.當滑鼠位於文章上方時，右上角翻頁，出現作者頭像。 2.文章高度自適應 以下是代碼（調代碼用的 ...
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-bottom: 50px; 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>
更新一下，文章高度自適應修改：視窗大小變化時候，文章高度自適應
為了避免視窗重繪，原文章高度丟失，增加全局數組存儲文章的高度，併在頁面重載或者視窗大小變化的時候，重置文章的高度。
<script> $(document).ready(function(){ arr = {}; var ars = $(".article"); var n = $(".article").length; for(var i=0;i<n;i++){ arr[i] = $(ars).eq(i).height(); } //height auto高度自適應 function heightAuto(){ var ars = $(".article"); var n = Math.floor($(".content").width()/$(".article").outerWidth(true)); //高度初始化 var artLength = $(".article").length; for(var j=0;j<artLength;j++){ $(ars).eq(j).height(arr[j]); } $.each(ars,function(i,a){ if(i%n==0){ var max = $(ars).eq(i).height(); for(var j=0;j<n;j++){ if($(ars).eq(i+j).height()<$(ars).eq(i+j+1).height()){ max = $(ars).eq(i+j+1).height(); } } for(var m=0;m<n;m++){ $(ars).eq(i+m).height(max); } }} ); } //界面load，高度自適應 heightAuto(); //視窗重繪，高度自適應 $(window).resize(function(){ heightAuto(); }); //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>
