欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery去掉时间轴头尾部线条实例讲解

程序员文章站 2022-03-31 09:58:57
...
本文主要给大家介绍了利用jquery实现去掉时光轴头尾部线条的方法,文中给出了详细的实例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。希望能帮助到大家。

前言

以前做类似时光轴的结构,几乎都是一条灰色线飞流直下,没有尽头。今天这个线条是从第一个圆点到最后一个圆点,那么问题来了,内容的高度还不是固定的,线条的长度怎么确定?怎么就能刚刚好从第一个点到最后一个点首尾相连呢?这就是下面所要做的。

先看效果,如下图:

jquery去掉时间轴头尾部线条实例讲解

思路:

  1、写一个p包住整个内容,就能知道所有列表的总高度;

  2、写一条细线定位到右边,对,高度100%,内容多高,细线就多高;

  3、开始的小点距离顶部多高,细线就距离顶部多高;

  4、使用js设置细线的高度 = 总高度 - 最后一个列表的高度;

  !!!什么??看不懂??没关系,那我总结成一句话:细线的高度减掉最后一个内容的高度就刚刚好。

实现方法

第一步:写结构

<p class="line_box">
  <p class="line"></p>
  <ul>
   <li><i></i>就是这么帅,就是这么不要脸!写多长都没关系,反正右边线条会自适应!<span></span></li>
   <li><i></i>没办法,就是这么帅,就是这么叼!<span></span></li>
   <li><i></i>帅到自然醒,帅到闪到腰!<span></span></li>
  </ul>
 </p>

  (1) 定一条灰色细线.line

  (2) 每一个内容就是一个li

  (3) i就是那个三角形(什么??不会用CSS画三角形?百度一下,你就知道了)

  (4) span 就是那个小红点

第二步:写样式

<style type="text/css">
 .line_box {width: 200px;margin: 0 auto;position: relative;}
 .line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;}
 ul {padding-left: 20px;}
 li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}
 li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}
 li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}
</style>

  (1) 好像没什么要说的。。。

  (2) 哈哈,想到了。画三角形的原理就是把一条边框设置为红色,其它三边都设置为透明,就像这样:

    border-color:transparent red transparent transparent; 方向依次为 上 右 下 左

第三步:写js代码

(function hei(){

 var li = $("li"),
  len = li.length,
  he = $(".line_box").outerHeight(),
  old = li.eq(len - 1).outerHeight();

 $(".line").height( Number(he) - Number(old) );

}());

  (1) 获取最外层的高度he

  (2) 再获取最后一个内容的高度old

  (3) 最总的高度就是(1) - (2)

  (4) 这里之所以用outerHeight(),就是想把padding和border的高度也算进来

总结:

本次使用的是总高度减去最后一个内容的高度来算出细线的高度,当然还有其它的办法,不过最好还是加个resize监听浏览器变化就重新设置细线的高度就比较完善了。

这里使用百度CDN:

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

完整的代码为:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
.line_box {width: 200px;margin: 0 auto;position: relative;} 
.line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;} 
ul {padding-left: 20px;} 
li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;} 
li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;} 
li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;} 
</style> 
</head> 
<body> 
<p> 
 <p></p> 
 <ul> 
  <li><i></i>就是这么帅,就是这么不要脸!就是这么帅,就是这么不要脸!<span></span></li> 
  <li><i></i>没办法,就是这么帅,就是这么叼!<span></span></li> 
  <li><i></i>帅到自然醒,帅到闪到腰!<span></span></li> 
 </ul> 
</p> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
$(function(){ 
 
(function hei(){ 
 
 var li = $("li"), 
  len = li.length, 
  he = $(".line_box").outerHeight(), 
  old = li.eq(len - 1).outerHeight(); 
 
 $(".line").height( Number(he) - Number(old) ); 
 
}()); 
 
}) 
 
</script> 
</body> 
</html>

相关推荐:

angularjs实现时间轴效果分享

几款Jquery实现的漂亮时间轴教程

关于时间轴的效果解析

以上就是jquery去掉时间轴头尾部线条实例讲解的详细内容,更多请关注其它相关文章!