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

最新推荐文章于 2024-07-22 19:22:41 发布

liu1277109419

最新推荐文章于 2024-07-22 19:22:41 发布

阅读量5.7k

点赞数

分类专栏： web前端文章标签：横向时间轴横向时间轴 jquery css

本文链接：https://blog.csdn.net/liu1277109419/article/details/73252610

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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>

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

功能太过简单，仅供参考

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