当前位置：首页 > 资讯 > 技术文档

利用jquery去掉时光轴头尾部线条的方法实例

时间：2020-05-29 22:16 编辑：来源：阅读：
扫一扫，手机访问

摘要：利用jquery去掉时光轴头尾部线条的方法实例

[b]前言[/b] 以前做类似时光轴的结构，几乎都是一条灰色线飞流直下，没有尽头。今天这个线条是从第一个圆点到最后一个圆点，那么问题来了，内容的高度还不是固定的，线条的长度怎么确定？怎么就能刚刚好从第一个点到最后一个点首尾相连呢？这就是下面所要做的。 [b]先看效果，如下图：[/b] [img]http://files.jb51.net/file_images/article/201706/201761684835324.png?201751684858[/img] [b]思路：[/b] 　　1、写一个div包住整个内容，就能知道所有列表的总高度；　　2、写一条细线定位到右边，对，高度100%，内容多高，细线就多高；　　3、开始的小点距离顶部多高，细线就距离顶部多高；　　4、使用js设置细线的高度 = 总高度 - 最后一个列表的高度；　　！！！什么？？看不懂？？没关系，那我总结成一句话：细线的高度减掉最后一个内容的高度就刚刚好。 [b]实现方法[/b] [b]第一步：写结构[/b]

<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 就是那个小红点 [b]第二步：写样式[/b]

<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) 哈哈，想到了。画三角形的原理就是把一条边框设置为红色，其它三边都设置为透明，就像这样：　　　　[code]border-color:transparent red transparent transparent; [/code]方向依次为上右下左 [b]第三步：写js代码[/b]

(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的高度也算进来 [b]总结：[/b] 本次使用的是总高度减去最后一个内容的高度来算出细线的高度，当然还有其它的办法，不过最好还是加个resize监听浏览器变化就重新设置细线的高度就比较完善了。这里使用百度CDN：

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

[b]完整的代码为：[/b]

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

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：jquery访问ashx文件示例代码
下一篇：JQuery Ajax通过Handler访问外部XML数据的代码

资讯排行榜
更多>>