简单时间轴

来源：互联网发布：生成雪碧图 for mac 编辑：程序博客网时间：2024/05/27 14:13

时间轴

时间轴效果
这里写图片描述

/* css代码 */@charset "UTF-8";/** 通用 start **/*{margin:0;padding:0;}body{-webkit-tap-highlight-color:rgba(255,255,255,0);}/*屏蔽长按出现蓝色背景*/html{font-size:62.5%;}html body{font:1.2rem "微软雅黑";margin:0 auto;min-width:320px; background:#f0f0f0;}em,i{font-style:normal; margin:0; padding:0;}ul,li{list-style:none}.title{width:100%;background-color: #fff;height:4rem;font-size: 2rem;line-height: 4rem;}.my_menu_line{width:100%;height:1px;background-color: #e0e0e0;}.order_process_list_yzp{width:100%;height:6rem;background-color: #fff;padding-top:1rem;}.order_process_list_yzp li{float:left; width:20%;color:#858585; text-align:center; height:6rem; line-height:6rem; font-size:1.4rem;}.icon_black_dian{position:relative; display:inline-block;border-radius:50%; background-color:grey;width:1.5rem; height:1.5rem; background-size:100%; left:42%; top:-1.5rem; margin-left:-1.4rem;z-index:1000;}.icon_green_dian{position:relative; display:inline-block; border-radius:50%;background-color:green; width:1.5rem; height:1.5rem; background-size:100%; left:42%; top:-1.5rem; margin-left:-1.4rem;z-index:1000;}.icon_red_dian{position:relative; display:inline-block; border-radius:50%;background-color:red; width:1.5rem; height:1.5rem; background-size:100%; left:42%; top:-1.5rem; margin-left:-1.4rem;z-index:1000;}.icon_line_right{position:absolute; border-bottom:0.1rem solid #ccc; width:100%; right:0; top:6.2rem;}

<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    <title>时间轴</title>    <link rel="stylesheet" href="index.css">    <script src="jquery-1.9.1.js"></script></head><body>    <div class="title">订单状态</div>    <div class="my_menu_line"></div>    <ul class="order_process_list_yzp fix pt10 tb">        <li class="rel current"><em class="icon_black_dian"></em></em>待接单</li>        <li class="rel current"><em class="icon_black_dian"></em></em>已接单</li>        <li class="rel current"><em class="icon_black_dian"></em></em>待付款</li>        <li class="rel current"><em class="icon_black_dian"></em></em>待送回</li>        <li class="rel current"><em class="icon_black_dian"></em></em>已完成</li>        <em class="icon_line_right">    </ul>    </div>    <!-- 订单状态显示 -->    <script>    $(document).ready(function() {                $('li').click(function() {                    var liNum = $(this).index();                    $("li:eq(" + liNum + ") em:first").addClass('icon_red_dian')                    $("li:eq(" + liNum + ") em:first").removeClass('icon_black_dian')                    $('li').each(function() {                        var num = $(this).index();                        if (num < liNum) {                            console.log(liNum)                            $("li:eq(" + num + ") em:first").addClass('icon_green_dian')                             $("li:eq(" + num + ") em:first").removeClass('icon_red_dian')                        }                         else if(num > liNum){                                $("li:eq(" + num + ") em:first").removeClass()                                $("li:eq(" + num + ") em:first").addClass('icon_black_dian')                             }                            else if (liNum == 4) {                            $("li:eq(" + num + ") em:first").addClass('icon_green_dian')                            $("li:eq(" + num + ") em:first").removeClass('icon_red_dian')                        }                    })                })                                 });    </script></body></html>

jQuery 事件(http://www.runoob.com/)

$(document).ready() 方法允许我们在文档完全加载完后执行函数。
当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。($(selector).click(function))。
index() 方法返回指定元素相对于其他指定元素的 index 位置。这些元素可通过 jQuery 选择器或 DOM 元素来指定。注意：如果未找到元素，index() 将返回 -1。

eg:获得被点击的 <li>元素相对于它的同级元素的 index：
$("li").click(function(){ alert($(this).index()); });
jQuery :eq() 选择器;
- :eq() 选择器选取带有指定 index 值的元素。
- index 值从 0 开始，所以第一个元素的 index 值是 0（不是 1）。
- 最常见的用法：与其他选择器一起使用，选取指定组合中指定索引的元素。
jQuery :first 选择器
- :first 选择器选取第一个元素。
- 注意：这个选择器只用于选取单个元素。使用 :first-child 选择器选取多个元素（每个父元素一个）。
- 最常见的用法：与其他选择器一起使用，选取指定组合中的第一个元素。
- 提示：如需选取指定组合中的最后一个元素，请使用 :last 选择器。
jQuery addClass() 方法
- addClass() 方法向被选元素添加一个或多个类名。
- 该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
- 提示：如需添加多个类，请使用空格分隔类名。
eg:向第一个
元素添加一个类名：
$("button").click(function(){ $("p:first").addClass("intro"); });
jQuery removeClass() 方法
- removeClass() 方法从被选元素移除一个或多个类。
- 注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
eg:从所有的<p>元素移除 “intro” 类：
$("button").click(function(){ $("p").removeClass("intro"); });

0 0