使用jquery去掉时光轴头尾部的线条

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

二、先看效果,如下图:

三、思路:

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

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

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

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

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

四、第一步:写结构

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

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

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

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

  (4) span 就是那个小红点

五、第二步:写样式

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

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

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

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

六、第三步:写js代码

 1 (function hei(){
 2
 3     var li  = $("li"),
 4         len = li.length,
 5         he  = $(".line_box").outerHeight(),
 6         old = li.eq(len - 1).outerHeight();
 7
 8     $(".line").height( Number(he) - Number(old) );
 9
10 }());

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

  完整的代码为:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="utf-8">
 5 <style type="text/css">
 6 .line_box {width: 200px;margin: 0 auto;position: relative;}
 7 .line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;}
 8 ul {padding-left: 20px;}
 9 li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}
10 li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}
11 li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}
12 </style>
13 </head>
14 <body>
15 <div class="line_box">
16     <div class="line"></div>
17     <ul>
18         <li><i></i>就是这么帅,就是这么不要脸!就是这么帅,就是这么不要脸!<span></span></li>
19         <li><i></i>没办法,就是这么帅,就是这么叼!<span></span></li>
20         <li><i></i>帅到自然醒,帅到闪到腰!<span></span></li>
21     </ul>
22 </div>
23 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
24 <script>
25 $(function(){
26
27 (function hei(){
28
29     var li  = $("li"),
30         len = li.length,
31         he  = $(".line_box").outerHeight(),
32         old = li.eq(len - 1).outerHeight();
33
34     $(".line").height( Number(he) - Number(old) );
35
36 }());
37
38 })
39
40 </script>
41 </body>
42 </html>
时间: 06-08

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

CollectionView添加头尾部

//上下拉头尾部 self.collectionView.footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(footRequestMore)]; self.collectionView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selec

jQuery去掉回车换行

.replace(/[\r\n]/g,"")//去掉回车换行 ============= 在js里面如果有换行js语法就会认为有错误,今天遇到这个问题还以为是jQuery方法对于字符串的长度有限制或者对于表单输入的默认长度有限制. 最后查了半天知道原来是字段换行,导致的js错误.将换行替换成空串即可. jQuery去掉回车换行

夺命雷公狗jquery---40在元素头尾部插入元素可alert出来看

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function(){ //版定click事件 $('#btnok').bind('click',function(){ //1

jquery去掉onclick事件

要实现效果:点击链接先去掉onclick属性,3秒后再自动加上该标签中的onclick属性 jQuery中,针对标签属性的操作都是使用attr()方法来实现的,比如:$("a").attr("onclick")可获得a标签的onclick属性,对应的: 删除onclick属性:$("a").removeAttr("onclick"); 设置onclick属性:$("a").attr("onclic

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

Jquery:$("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));//去掉空格 .replace(/\ +/g,"") //去掉空格方法$("#content").val($("#content").val().replace(/[ ]/g,""));    //去掉空格 .replace(/[ ]/

使用editplus等编程工具时UTF-8编码去掉BOM头方法(转载备查)

Unicode规范中有一个BOM的概念.BOM--Byte Order Mark,就是字节序标记.在这里找到一段关于BOM的说明: 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF.而FFFE在UCS中是不存在的字符,所以不应该出现在实际传输中.UCS规范建议我们在传输字节流前,先传输 字符"ZERO WIDTH NO-BREAK SPACE".这样如果接收者收到FEFF,就表明这个字节流是Big-Endia

JQuery图形插件,Highcharts平滑线条处理方法

第一种:静态数据 $('#THChartDiv').highcharts({ chart: { type: 'spline' }, title: { text:过程线' }, xAxis: { title: { text: 'X' } }, yAxis: { title: { text: 'Y' } }, tooltip: { enabled: true, formatter: function () { return 'this.y + ',' + this.x; } }, legend: {

什么是 BOM头以及如何去掉

什么是 BOM头? 类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码.对于一般的文件,这样并不会产生什么麻烦.但对于 PHP来说,BOM是个大麻烦. PHP并不会忽略BOM,所以在读取.包含或者引用这些文件时,会把BOM作为该文件开头正文的一部分.根据嵌入式语言的特点,这串字符将被直接执行(显示)出来.由此造成即使页面

【协议分析】HTTP响应头中的2种编码方式介绍

HTTP 1.1中有两个实体头(Entity-Header)直接与编码相关,分别为Content-Encoding和Transfer-Encoding.    先说Content-Encoding, 该头表示实体已经采用了的编码方式.Content-Encoding是请求URL对应实体(Entity)本身的一部分.比如请求URL为 http://host/image.png.gz时,可能会得到的Content-Encoding为gzip.Content-Encoding的值是不区分大小写的,目前