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

来源：互联网发布：伦敦金数据网编辑：程序博客网时间：2024/06/15 17:00

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

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>

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

功能太过简单，仅供参考

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

阅读全文

0 0