利用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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
详解js类型判断
2018/05/22 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python 中的with关键字使用详解
2016/09/11 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
简单了解python变量的作用域
2019/07/30 Python
python设置随机种子实例讲解
2019/09/12 Python
浅析Python3 pip换源问题
2020/01/06 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
应届生财务会计求职信
2013/11/05 职场文书
给实习单位的感谢信
2014/02/01 职场文书
自我鉴定总结
2014/03/24 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书