您的位置：首页 > Web前端 > JQuery

三十行代码写一个最简单的时间轴插件--jquery

2017-06-14 21:41 489 查看

说是插件，严格来说只能算是一个小函数。不多说了，先贴个图：

css：

@charset "utf-8";
@charset "utf-8";
/* CSS 定制的公共样式 */
html,body{font-family:"Microsoft yahei";font-size:12px; line-height:20px;color:#888; background-color:#fff; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ,input{margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6{ font-weight:normal; font-size:12px;}
a{color:#666; text-decoration:none;transition:background-color 0.1s ease-in 0s, color 0.2s ease-in 0s;-webkit-transition:background-color 0.1s ease-in 0s, color 0.2s ease-in 0s;outline:none} /* for firefox */
a:hover{color:#333;}
ul,dl{ list-style-type:none;}
li{vertical-align:top;}
.clear{ clear:both; margin:0; padding:0; font-size:0px; line-height:0px; height:0px; overflow:hidden;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix {zoom:1;}
*+html .clearfix {zoom:1;}
img{ border:none; vertical-align:top;}
input,textarea{font-family:"Microsoft yahei"; font-size:12px;color:#888;border:none;outline: medium none;transition:background-color 0.2s ease-in 0s, color 0.2s ease-in 0s;-webkit-transition:background-color 0.2s ease-in 0s, color 0.2s ease-in 0s;}
input:focus{ }
/* CSS 活动的公共样式 */

.course{ height:162px; background:#FFF;}
.course_nr{height:162px; background:url(../images/ico9.gif) repeat-x center;}
.course_nr li{ float:left; background:url(../images/ico10.gif) no-repeat center top; padding-top:30px; width:140px; text-align:center; position:relative; margin-top:65px;}
.shiji{ position:absolute; width:67px; height: 67px; left:20px; top:-20px;}
.shiji h1{ height:67px; line-height:67px; color:#518dbb; font-weight:bold; background:url(../images/ico11.gif) no-repeat center top;background-size: cover; margin-bottom:8px;}
.shiji p{ line-height:14px; color:#999;}

js：

/**
* Created by liuyq on 2017/5/27.
*/
$.extend({timeLine:  function(elem){
$(elem).find('.shiji').hover(function(){
$w = $(this).width()+20;
$h = $(this).height()+20;
$(this).find("h1").css({
height: $h,
lineHeight: $h+"px",
fontSize: "16px"
});
$(this).css({
width: $w,
height: $h
});

},
function(){
$w = $(this).width()-20;
$h = $(this).height()-20;
$(this).find("h1").css({
height: $h,
lineHeight: $h+"px",
fontSize: "12px"
},"slow");
$(this).css({
width: $w,
height: $h
},"slow");

});
}
});

html:

<html>

<head>
<link href="./css/timeLine.css" rel="stylesheet">
</head>

<body>
<ul class="course_nr course_nr2" id="webfinal-timeLine-template-content">

<li>
<div class="shiji">
<h1>5月27</h1>
</p><p>广州收件</p>
<p></p>
</div>
</li>

<li>
<div class="shiji" style="width: 67px; height: 67px;">
<h1 style="height: 67px; line-height: 67px; font-size: 12px;">5月27</h1>
</p><p>广州发出</p>
<p></p>
</div>
</li>

<li>
<div class="shiji" style="width: 67px; height: 67px;">
<h1 style="height: 67px; line-height: 67px; font-size: 12px;">5月28</h1>
</p><p>上海中转</p>
<p></p>
</div>
</li>

<li>
<div class="shiji" style="width: 67px; height: 67px;">
<h1 style="height: 67px; line-height: 67px; font-size: 12px;">5月29</h1>
</p><p>到达济南</p>
</div>
</li>

<li>
<div class="shiji">
<h1>5月29</h1>
</p><p>快递员派件</p>
</div>
</li>

</ul>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/timeLine.js"></script>
<script type="text/javascript">
$(function(){
$.timeLine($("#webfinal-timeLine-template-content"));
});
</script>
</html>

---------------------------------------------------------------------------

功能太过简单，仅供参考

注：原型来源于另一个网站，找不到网址了见谅

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 横向时间轴横向时间轴 jquery css

相关文章推荐

新的分享

章节导航