<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>类似微博顶置效果</title> <style> ul{600px;margin:auto;} li{list-style:none;padding:10px 0;line-height:22px;border-bottom:1px solid #ddd;} a{color:deepskyblue;text-decoration:none;} a:hover{text-decoration:underline;} .lf{float:left;} .rt{float:right;} .cl:after{content:' ';display:block;height:0;clear:both;} .wb-detail{500px;} .wb-detail h2{margin:0;} .wb-content{margin:10px auto;} .userimg{80px;height:80px;} </style> </head> <body> <ul id="overheadUl"> <li class="cl overheadLi"> <div class="lf"> <a href="#"><img class="userimg" src="http://ac-mhke0kuv.clouddn.com/bac28828a49181c34110.png"></a> </div> <div class="rt wb-detail"> <div class="cl"> <div class="rt"><a class="set-overhead" href="javascript:void(0)">置顶↑</a></div> <h2 class="lf"><a href="#">title1</a></h2> </div> <div class="wb-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque consequatur culpa dolores ex expedita labore laborum magnam minima, nulla numquam omnis possimus repellat repellendus saepe sed ut, veritatis voluptas voluptatibus! </div> <div class="cl"> <div class="rt"> <a href="#">转发</a>| <a href="#">收藏</a>| <a href="#">评论(2)</a> </div> <div class="lf"> <a href="#">今天16:16</a> <span>来自</span> <a href="#">xxx</a> </div> </div> </div> </li> <li class="cl overheadLi"> <div class="lf"> <a href="#"><img class="userimg" src="http://ac-mhke0kuv.clouddn.com/bac28828a49181c34110.png" ></a> </div> <div class="rt wb-detail"> <div class="cl"> <div class="rt"><a class="set-overhead" href="javascript:void(0)">置顶↑</a></div> <h2 class="lf"><a href="#">title2</a></h2> </div> <div class="wb-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque consequatur culpa dolores ex expedita labore laborum magnam minima, nulla numquam omnis possimus repellat repellendus saepe sed ut, veritatis voluptas voluptatibus! </div> <div class="cl"> <div class="rt"> <a href="#">转发</a>| <a href="#">收藏</a>| <a href="#">评论(7)</a> </div> <div class="lf"> <a href="#">今天16:17</a> <span>来自</span> <a href="#">xxx</a> </div> </div> </div> </li> </ul> <script> window.onload=function(){ function fadeIn(ele){ var aVal = 1; function step(){ ele.style.opacity = (aVal / 100); ele.style.filter = 'alpha(opacity=' + aVal + ')'; aVal ++; if(aVal <= 100){ setTimeout(step,15); } } step(); } var elm=document.getElementsByClassName('set-overhead'), iul=document.getElementById('overheadUl'); for(var i= 0,len=elm.length;i<len;i++){ elm[i].onclick=function(){ console.log(111); var node=this.parentNode.parentNode.parentNode.parentNode; if(node.previousElementSibling){ iul.insertBefore(node,iul.firstElementChild); fadeIn(node); }else{ alert('已经顶置过了！'); } } } } </script> </body> </html>