如何使用jquery去掉时光轴头尾部线条-创新互联
小编给大家分享一下如何使用jquery去掉时光轴头尾部线条,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联公司始终坚持【策划先行,效果至上】的经营理念,通过多达10年累计超上千家客户的网站建设总结了一套系统有效的网络营销推广解决方案,现已广泛运用于各行各业的客户,其中包括:成都户外休闲椅等企业,备受客户称扬。先看效果,如下图:
思路:
1、写一个div包住整个内容,就能知道所有列表的总高度;
2、写一条细线定位到右边,对,高度100%,内容多高,细线就多高;
3、开始的小点距离顶部多高,细线就距离顶部多高;
4、使用js设置细线的高度 = 总高度 - 最后一个列表的高度;
!!!什么??看不懂??没关系,那我总结成一句话:细线的高度减掉最后一个内容的高度就刚刚好。
实现方法
第一步:写结构
- 就是这么帅,就是这么不要脸!写多长都没关系,反正右边线条会自适应!
- 没办法,就是这么帅,就是这么叼!
- 帅到自然醒,帅到闪到腰!
(1) 定一条灰色细线.line
(2) 每一个内容就是一个li
(3) i就是那个三角形(什么??不会用CSS画三角形?百度一下,你就知道了)
(4) span 就是那个小红点
第二步:写样式
(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:
完整的代码为:
- 就是这么帅,就是这么不要脸!就是这么帅,就是这么不要脸!
- 没办法,就是这么帅,就是这么叼!
- 帅到自然醒,帅到闪到腰!
看完了这篇文章,相信你对“如何使用jquery去掉时光轴头尾部线条”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:如何使用jquery去掉时光轴头尾部线条-创新互联
文章来源:http://scjbc.cn/article/dgeggs.html