使用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:;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>
最新文章
- 从java文件和CS文件里查询方法使用次数工具
- C++11 之 并发编程 (一)
- cmd部分提权常用命令
- select元素中设置padding效果
- Objective-C:Foundation框架-常用类-NSDictionary
- 《Python基础教程(第二版)》学习笔记 ->; 第一章 基础知识
- George and Cards
- Flex 日志管理
- Webapi备忘-20140109
- Linux文件权限及用户管理
- 漫谈程序员(十)大白菜装机版安装win7系统使用教程
- python xpath学习
- linux 下安装mysql-5.7.12-1.el6.x86_64.rpm-bundle.tar
- 关于oracle中的数字类型
- 【Web】前端文件上传,带进度条
- 关于Spring IOC (DI-依赖注入)需要知道的一切
- “数学口袋精灵”App的第二个Sprint计划----开发日记
- PHP的魔术方法
- Ajax返回乱码
- bootstrap作为mixin库的应用模式
热门文章
- 「模拟赛20190327」 第二题 DP+决策单调性优化
- minizip -基于zlib开源代码库
- npm 修改源 pip 修改源
- 007 Android 单击事件、toast使用
- 洛谷 P1477 [NOI2008]假面舞会
- D. Minimum Diameter Tree Round #528 (Div. 2)【树】
- poj2420 A Star not a Tree? 找费马点 模拟退火
- vue 同一个组件的跳转, 返回时保留原来的下拉位置
- vm 中安装 CentOS7
- 2.rabbitmq 系列教程