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


Posted in jQuery onJune 16, 2017

前言

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

先看效果,如下图:

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

思路:

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: 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) 哈哈,想到了。画三角形的原理就是把一条边框设置为红色,其它三边都设置为透明,就像这样:

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 相关文章推荐
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
jQuery.form.js的使用详解
Jun 14 #jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 #jQuery
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
You might like
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
初探nodeJS
2017/01/24 NodeJs
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
python获取外网ip地址的方法总结
2015/07/02 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
python实现银行账户系统
2021/02/22 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
市场营销专业个人求职信范文
2013/12/14 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
班组长岗位职责
2014/03/03 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
给学校的建议书400字
2015/09/14 职场文书