类似微博顶置效果

首页 > 代码库 > 类似微博顶置效果

2024-08-17 03:11:53 213人阅读

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>类似微博顶置效果</title> <style> ul{width: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{width:500px;} .wb-detail h2{margin:0;} .wb-content{margin:10px auto;} .userimg{width:80px;height:80px;} </style></head><body><ul id="overheadUl"> <li class="cl overheadLi"> <div class="lf"> <a href="http://www.mamicode.com/#"><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="http://www.mamicode.com/#">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="http://www.mamicode.com/#">转发</a>| <a href="http://www.mamicode.com/#">收藏</a>| <a href="http://www.mamicode.com/#">评论(2)</a> </div> <div class="lf"> <a href="http://www.mamicode.com/#">今天16:16</a> <span>来自</span> <a href="http://www.mamicode.com/#">xxx</a> </div> </div> </div> </li> <li class="cl overheadLi"> <div class="lf"> <a href="http://www.mamicode.com/#"><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="http://www.mamicode.com/#">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="http://www.mamicode.com/#">转发</a>| <a href="http://www.mamicode.com/#">收藏</a>| <a href="http://www.mamicode.com/#">评论(7)</a> </div> <div class="lf"> <a href="http://www.mamicode.com/#">今天16:17</a> <span>来自</span> <a href="http://www.mamicode.com/#">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>

类似微博顶置效果

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

联系
我们

首页 > 代码库 > 类似微博顶置效果

类似微博顶置效果

看完仍有疑问？有类似问题直接问程序猿