网站建设资讯

NEWS

网站建设资讯

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

小编给大家分享一下如何使用jquery去掉时光轴头尾部线条,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联公司从2013年创立,公司以成都做网站、成都网站建设、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户成百上千,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。

先看效果,如下图:

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

思路:

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

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

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

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

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

实现方法

第一步:写结构


  
  
       
  • 就是这么帅,就是这么不要脸!写多长都没关系,反正右边线条会自适应!
  •    
  • 没办法,就是这么帅,就是这么叼!
  •    
  • 帅到自然醒,帅到闪到腰!
  •   
 

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

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

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

(4) span 就是那个小红点

第二步:写样式


 .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%;}

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

完整的代码为:






.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%;}




 
 

看完了这篇文章,相信你对“如何使用jquery去掉时光轴头尾部线条”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前标题:如何使用jquery去掉时光轴头尾部线条
文章起源:http://cdweb.net/article/jgpeoi.html

其他资讯