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

二、先看效果，如下图：

三、思路：

　　1、写一个div包住整个内容，就能知道所有列表的总高度；

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

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

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

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

四、第一步：写结构

     <div class="line_box">

         <div class="line"></div>

         <ul>

             <li><i></i>就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！<span></span></li>

             <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li>

             <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li>

         </ul>

     </div>

　　(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:;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 lang="en">

 <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>

 <div class="line_box">

     <div class="line"></div>

     <ul>

         <li><i></i>就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！<span></span></li>

         <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li>

         <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li>

     </ul>

 </div>

 <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>

使用jquery去掉时光轴头尾部的线条的更多相关文章

  1. CollectionView添加头尾部

    //上下拉头尾部 self.collectionView.footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self ref ...

  2. Jquery取小数后边2位，N位；jQuery去掉字符串首尾空字符串

    function fix(num, N) { , N); return Math.round(num * base) / base; } 实例,取小数后边两位 var yhmoney2 = fix(1 ...

  3. js/jquery 去掉空格.回车.换行

    本文转载自 http://hi.baidu.com/niubore/item/426532faab4ddcc50dd1c8f9 Jquery:$("#accuracy").val( ...

  4. jQuery去掉导航分割线的最后一条竖线

    #top #navigation ul li { float:left; width:120px; background:url(../images/navline.jpg) no-repeat 11 ...

  5. js/jquery去掉空格,回车,换行示例代码

    Jquery: $("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));// ...

  6. js/jquery去掉空格,回车,换行

    Jquery:$("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));//去 ...

  7. 什么是BOM头，BOM头有什么影响，怎么去掉BOM头

    什么是bom头? 在utf-8编码文件中BOM在文件头部,占用三个字节,用来标示该文件属于utf-8编码,现在已经有很多软件识别bom头,但是还有些不能识别bom头,比如PHP就不能识别bom头,这也 ...

  8. 详解BOM头以及去掉BOM头的方法

    类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别 ...

  9. jquery去掉或者替换字符,设置指定options为selected状态

    <html> <body> <div><select id="queryYear">                 <opt ...

随机推荐

  1. JDBC_批处理Batch_插入2万条数据的测试

    批处理   Batch 对于大量的批处理,建议使用Statement,因为PreparedStatement的预编译空间有限,当数据特别大时,会发生异常. import java.sql.Connec ...

  2. SDUT OJ 字典树 AND 静态内存与动态内存

    字典树 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 遇到单词不认识怎么办? 查字典 ...

  3. Not all processes could be identified, non-owned process info will not be shown, you would have to be root to see it all.

    分析:还是权限问题,所以给他加上权限就可以了!! 解决:chmod +s /bin/netstat

  4. Qt 学习之路 2（73）：Qt 线程相关类

    Home / Qt 学习之路 2 / Qt 学习之路 2(73):Qt 线程相关类 Qt 学习之路 2(73):Qt 线程相关类  豆子  2013年11月26日  Qt 学习之路 2  7条评论 希 ...

  5. C++_新特性1-类型转换运算符

    C++的创始人认为C语言的类型转换运算符太过于松散.他采取了更加严格的限制允许的类型转换.并添加了4个类型转换运算符. 这部分特性比较高阶,我把它归于奇技淫巧的范畴.这里简单介绍一下,以后实际有用到再 ...

  6. Codeforces Round #549 (Div. 2) Solution

    传送门 A.The Doors 看懂题目就会写的题 给一个 $01$ 序列,找到最早的位置使得 $0$ 或 $1$ 已经全部出现 #include<iostream> #include&l ...

  7. Phyton自定义包导入。

    说明:同一个项目下的自定义包. 项目层次: 1:先建好项目Pybasestudty 2:建Python package,包名:pytestpk,__init__.py是建包时自动产生的文件. 3:在该 ...

  8. PIE SDK去相关拉伸

    1.算法功能简介 由于高度相关的数据集经常生成十分柔和的彩色图像,因此经常使用 去相关拉伸工具来体消除多光谱数据集中的高度相关性, 从而生成一幅色彩亮丽的彩色合成图像.去相关拉伸需要 3 个输入波段, ...

  9. ibatis配置文件中的XML解析错误The content of elements must consist of well-formed character data or markup.

    在检查过所有的标签名都没有问题的情况下. xml中的小于号属于非法字符. SQL语句中则可能需要小于号,此时就需要用<![CDATA[  ]]>将小于号包裹,如此不会被xml解析器解析. ...

  10. Angular4+NodeJs+MySQL 入门-03 后台接口定义

    这篇里是如何定义接口,我们一般访问接口如:post请求调用http://127.0.0.1:11000/webapi/userinfo/user 这个接口,成功返回用户信息,如果失败要返回失败原因等. ...