搜索到
4
篇与
的结果
-
可视化项目 01-项目介绍 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 '立可得' 数据可视化项目。 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...02-使用技术完成该项目需要具备以下知识： div + css 布局 flex 布局 css3动画 css3渐变 css3边框图片 原生js + jquery 使用 rem适配 echarts基础 粗略代码统计： css 580行 html 450行 js 400行 (有效) 03-Echarts-介绍ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。大白话： 是一个JS插件 性能好可流畅运行PC与移动设备 兼容主流浏览器 提供很多常用图表，且可定制。 折线图、柱状图、散点图、饼图、K线图 04-Echarts-体验官方教程：[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)自己步骤： 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0 引入echarts dist/echarts.min.js 准备一个具备大小的DOM容器 <div id="main" style="width: 600px;height:400px;"></div> 初始化echarts实例对象 var myChart = echarts.init(document.getElementById('main')); 指定配置项和数据(option) var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; 将配置项设置给echarts实例对象 myChart.setOption(option); 05-Echarts-基础配置需要了解的主要配置：series xAxis yAxis grid tooltip title legend color series 系列列表。每个系列通过 type 决定自己的图表类型 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。 xAxis：直角坐标系 grid 中的 x 轴 boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 yAxis：直角坐标系 grid 中的 y 轴 grid：直角坐标系内绘图网格。 title：标题组件 tooltip：提示框组件 legend：图例组件 color：调色盘颜色列表数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。 演示代码：var option = { color: ['pink', 'blue', 'green', 'skyblue', 'red'], title: { text: '我的折线图' }, tooltip: { trigger: 'axis' }, legend: { data: ['直播营销', '联盟广告', '视频广告', '直接访问'] }, grid: { left: '3%', right: '3%', bottom: '3%', // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签 // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签 containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 boundaryGap: false, data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '直播营销', // 图表类型是线形图 type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', data: [320, 332, 301, 334, 390, 330, 320] } ] }; 06-REM适配 设计稿是1920px PC端适配： 宽度在 1024~1920之间页面元素宽高自适应 flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是 80px插件-配置按钮---配置扩展设置--Root Font Size 里面 设置。但是别忘记重启vscode软件保证生效 要把屏幕宽度约束在1024~1920之间有适配，实现代码： // 实现rem适配 @media screen and (max-width: 1024px) { html { font-size: 42.66px !important; } } @media screen and (min-width: 1920px) { html { font-size: 80px !important; } } 07-基础布局html结构：<body> <div class="viewport"> <div class="column"> <!--概览--> <div></div> <!--监控--> <div></div> <!--点位--> <div></div> </div> <div class="column"> <!--地图--> <div></div> <!--用户--> <div></div> </div> <div class="column"> <!--订单--> <div></div> <!--销售--> <div></div> <div> <!--渠道--> <div></div> <!--季度--> <div></div> </div> <!--排行--> <div></div> </div> </div> </body> 效果图： 1920px * 1078px body 设置背景图 ，行高1.15 viewport 主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。 需要居中显示 使用logo.png做为背景图，在容器内显示 内间距 88px 20px 0 column 列容器，分三列，占比 3：4：3 中间容器外间距 32px 20px 0 css样式：/* 基础布局 */ body{ font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; font-size: 0.5rem; line-height: 1.15; background: url(../images/bg.jpg) no-repeat 0 0 / cover; } h4,h3,ul{ margin: 0; padding: 0; font-weight: normal; } ul{ list-style: none; } a{ text-decoration: none; } .viewport{ max-width: 1920px; min-width: 1024px; margin: 0 auto; min-height: 780px; padding: 3.667rem 0.833rem 0; background: url(../images/logo.png) no-repeat 0 0 / contain; display: flex; } .column{ flex: 3; position: relative; } .column:nth-child(2){ flex: 4; margin: 1.333rem 0.833rem 0; } 08-边框图片css3中自适应边框图片运用：组合写法：border-image: url("images/border.jpg") 167/20px round; 拆分写法：border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; border-image-repeat: round; 解释： 边框图片资源地址 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。 边框图片的宽度，默认边框的宽度。 平铺方式： stretch 拉伸（默认） repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。 round 环绕，是完整的使用切割后的图片进行平铺。 DEMO代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框图片</title> <style> ul{ margin: 0; padding: 0; list-style: none; } li{ width: 350px; height: 160px; border: 20px solid #ccc; margin-top: 20px; } li:nth-child(1){ /*border-image: url("images/border.jpg") 167/20px round;*/ border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; /*环绕 是完整的使用切割后的图片进行平铺*/ border-image-repeat: round; } li:nth-child(2){ /*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/ border-image: url("images/border.jpg") 167/20px repeat; } li:nth-child(3){ /*默认的平铺方式*/ border-image: url("images/border.jpg") 167/20px stretch; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html> 09-公用面板样式所有的面板的基础样式是一致的，提前布局好。切割示例图： 面板 .panel 容器 .inner 内边距是 上下24px 左右 36px /* 公共面板样式 */ .panel { position: relative; border: 15px solid transparent; border-width: .6375rem .475rem .25rem 1.65rem; border-image-source: url(../images/border.png); border-image-slice: 51 38 20 132; margin-bottom: .25rem; } .inner { position: absolute; top: -0.6375rem; left: -1.65rem; right: -0.475rem; bottom: -0.25rem; padding: .3rem .45rem; } .panel h3 { font-size: 0.25rem; color: #fff; font-weight: 400; } 10-概览区域(overview)-布局html结构： <div class="overview panel"> <div class="inner"> <ul> <li> <h4>2,190</h4> <span> <i class="icon-dot" style="color: #006cff"></i> 设备总数 </span> </li> <li class="item"> <h4>190</h4> <span> <i class="icon-dot" style="color: #6acca3"></i> 季度新增 </span> </li> <li> <h4>3,001</h4> <span> <i class="icon-dot" style="color: #6acca3"></i> 运营设备 </span> </li> <li> <h4>108</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 异常设备 </span> </li> </ul> </div> </div> 样式描述： 容器高度 110px h4字体 28px #fff 左边距 4.8px 下间隙 8px span字体 16px #4c9bfd /* 概览区域 */ .overview { height: 1.375rem; } .overview ul { display: flex; justify-content: space-between; } .overview ul li h4 { font-size: .35rem; color: #fff; margin: 0 0 .1rem .06rem; } .overview ul li span { font-size: .2rem; color: #4c9bfd; } 11-监控区域(monitor)-布局html结构： <!--监控--> <div class="monitor panel"> <div class="inner"> <div class="tabs"> <a href="javascript:;" class="active">故障设备监控</a> <a href="javascript:;" >异常设备监控</a> </div> <div class="content"> <div class="head"> <span class="col">故障时间</span> <span class="col">设备地址</span> <span class="col">异常代码</span> </div> <div class="marquee-view"> <div class="marquee"> <div class="row"> <span class="col">20180701</span> <span class="col">11北京市昌平西路金燕龙写字楼</span> <span class="col">1000001</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190601</span> <span class="col">北京市昌平区城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190704</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000003</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20180701</span> <span class="col">北京市昌平区建路金燕龙写字楼</span> <span class="col">1000004</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000005</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000006</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建西路金燕龙写字楼</span> <span class="col">1000007</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000008</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000009</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190710</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000010</span> <span class="icon-dot"></span> </div> </div> </div> </div> <div class="content"> <div class="head"> <span class="col">异常时间</span> <span class="col">设备地址</span> <span class="col">异常代码</span> </div> <div class="marquee-view"> <div class="marquee"> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000001</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190703</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190704</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190705</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190706</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190707</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190708</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190709</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190710</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> </div> </div> </div> </div> </div> 监控区域 monitor 大盒子的高度是 480px结构解释： .tabs 标签选项 加上active激活选项 默认激活第一个选项 .content 切换内容 加上style="display: block;"显示内容 默认激活第一个内容 样式描述： .inner 容器内间距 24px 0 .tabs 容器内间距 0 36px a 容器 颜色： #1950c4 内间距：0 27px 字体：18px 第一个a容器 去除左侧内间距 加上右侧2px宽度边框#00f2f1 激活的时候 颜色白色 .content容器 占满剩余高度 flex:1 默认隐藏 .head 容器 行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px row 容器 行高 1.05 内间距 12px 36px 颜色 #68d8ff 字体大小 12px .icon-dot 字体图标 绝对定位 左边0.2rem 透明度0 鼠标经过后：背景 rgba(255, 255, 255, 0.1) 透明度1 col容器 宽度：1rem 2.5rem 1rem 第二个col 一行不换行 溢出 省略 /* 监控区域 */ .monitor{ height: 6rem; } .monitor .inner{ padding: .3rem 0; display: flex; flex-direction: column; } .monitor .tabs{ padding: 0 .45rem; margin-bottom: 0.225rem; display: flex; } .monitor .tabs a{ color:#1950c4; font-size: 0.225rem; padding: 0 .3375rem; } .monitor .tabs a:first-child{ padding-left: 0; border-right: 0.025rem solid #00f2f1; } .monitor .tabs a.active{ color: #fff; } .monitor .content{ flex: 1; position: relative; display: none; } .monitor .head{ display: flex; justify-content: space-between; line-height: 1.05; background-color: rgba(255, 255, 255, 0.1); padding: 0.15rem 0.45rem; color: #68d8fe; font-size: 0.175rem; } .monitor .marquee-view { position: absolute; top: 0.5rem; bottom: 0; width: 100%; overflow: hidden; } .monitor .row{ display: flex; justify-content: space-between; line-height: 1.05; font-size: 0.15rem; color: #61a8ff; padding: 0.15rem 0.45rem; } .monitor .row .icon-dot{ position: absolute; left: 0.2rem; opacity: 0; } .monitor .row:hover { background-color: rgba(255, 255, 255, 0.1); color: #68d8fe; } .monitor .row:hover .icon-dot{ opacity: 1; } .monitor .col:first-child{ width: 1rem; } .monitor .col:nth-child(2){ width: 2.5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .monitor .col:nth-child(3){ width: 1rem; } 12-监控区域-效果切换功能： 绑定 标签页点击 事件 当前容器加active其他容器移除active index对应的内容容器显示其他容器隐藏 // 切换 $(".monitor .tabs").on("click", "a", function() { $(this).addClass("active").siblings("a").removeClass("active"); // console.log($(this).index()); // 选取对应索引号的content $(".monitor .content").eq($(this).index()).show().siblings(".content").hide(); }); 动画功能： 实现思路： 先克隆列表，追加在后面 marquee-view 占满剩余高度，溢出隐藏 绝对定位，top 1.6rem bottom 0 宽度100%，溢出隐藏 使用animation实现动画 使用 translateY 向上位移 50% 动画时间15s，匀速播放，循环执行。 js代码： // 动画 $(".marquee-view .marquee").each(function() { // console.log($(this)); var rows = $(this).children().clone(); $(this).append(rows); }); css代码：/* 通过CSS3动画滚动marquee */ .marquee-view .marquee { animation: move 15s linear infinite; } @keyframes move { 0% { } 100% { transform: translateY(-50%); } } /* 3.鼠标经过marquee 就停止动画 */ .marquee-view .marquee:hover { animation-play-state: paused; } 13-点位区域(point)-布局html结构： <!-- 点位 --> <div class="point panel"> <div class="inner"> <h3>点位分布统计</h3> <div class="chart"> <div class="pie"></div> <div class="data"> <div class="item"> <h4>320,11</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 点位总数 </span> </div> <div class="item"> <h4>418</h4> <span> <i class="icon-dot" style="color: #eacf19"></i> 本月新增 </span> </div> </div> </div> </div> </div> css样式：point 盒子高度为 340px/* 点位 */ .point { height: 4.25rem; } .point .chart { display: flex; margin-top: 0.3rem; justify-content: space-between; } .point .pie { width: 3.9rem; height: 3rem; margin-left: -0.125rem; background-color: pink; } .point .data { display: flex; flex-direction: column; justify-content: space-between; width: 2.1rem; padding: .45rem .375rem; box-sizing: border-box; background-image: url(../images/rect.png); background-size: cover; } .point h4 { margin-bottom: 0.15rem; font-size: .35rem; color: #fff; } .point span { display: block; color: #4c9bfd; font-size: .2rem; } 14-点位区域-饼图ECharts图表实现步骤： 从官方示例中找到类似图表，适当修改，引入到HTML页面中。 按照产品需求，来定制图表。 1. HTML引入图表// 点位分布统计模块 (function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".pie")); // 2. 指定配置项和数据 var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, series: [ { name: "面积模式", type: "pie", radius: [30, 110], center: ["75%", "50%"], roseType: "area", data: [ { value: 10, name: "rose1" }, { value: 5, name: "rose2" }, { value: 15, name: "rose3" }, { value: 25, name: "rose4" }, { value: 20, name: "rose5" }, { value: 35, name: "rose6" }, { value: 30, name: "rose7" }, { value: 40, name: "rose8" } ] } ] }; // 3. 配置项和数据给我们的实例化对象 myChart.setOption(option); })(); 2. 定制需求第一步：参考官方例子，熟悉里面参数具体含义option = { // 提示框组件 tooltip: { // trigger 触发方式。 非轴图形，使用item的意思是放到数据对应图形上触发提示 trigger: 'item', // 格式化提示内容： // a 代表series系列图表名称 // b 代表series数据名称 data 里面的name // c 代表series数据值 data 里面的value // d代表 当前数据/总数据的比例 formatter: "{a} <br/>{b} : {c} ({d}%)" }, // 控制图表 series: [ { // 图表名称 name: '点位统计', // 图表类型 type: 'pie', // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70% // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小） radius: ['10%', '70%'], // 图表中心位置 left 50% top 50% 距离图表DOM容器 center: ['50%', '50%'], // radius 半径模式，另外一种是 area 面积模式 roseType: 'radius', // 数据集 value 数据的值 name 数据的名称 data: [ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] } ] }; 第二步：按照需求定制 需求1：颜色设置 color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'], 需求2：修改饼形图大小 ( series对象) radius: ['10%', '70%'], 需求3： 把饼形图的显示模式改为 半径模式 roseType: "radius", 需求4：数据使用更换（series对象 里面 data对象） { value: 20, name: '云南' }, { value: 26, name: '北京' }, { value: 24, name: '山东' }, { value: 25, name: '河北' }, { value: 20, name: '江苏' }, { value: 25, name: '浙江' }, { value: 30, name: '四川' }, { value: 42, name: '湖北' } 需求5：字体略小些 10 px ( series对象里面设置 )饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置 series: [ { name: "面积模式", type: "pie", radius: [30, 110], center: ["50%", "50%"], roseType: "radius", // 文本标签控制饼形图文字的相关样式， 注意它是一个对象 label: { fontSize: 10 }, } ] }; 需求6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 ) 连接图表 6 px 连接文字 8 px + // 文字调整 + label:{ + fontSize: 10 + }, + // 引导线调整 + labelLine: { + // 连接扇形图线长 + length: 6, + // 连接文字线长 + length2: 8 + } + } + ], 需求6：浏览器缩放的时候，图表跟着自动适配。 // 监听浏览器缩放，图表对象调用缩放resize函数 window.addEventListener("resize", function() { myChart.resize(); }); 点位统计完整JavaScript代码：// 点位分布统计模块 (function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".pie")); // 2. 指定配置项和数据 var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, // 注意颜色写的位置 color: [ "#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff" ], series: [ { name: "点位统计", type: "pie", // 如果radius是百分比则必须加引号 radius: ["10%", "70%"], center: ["50%", "50%"], roseType: "radius", data: [ { value: 20, name: "云南" }, { value: 26, name: "北京" }, { value: 24, name: "山东" }, { value: 25, name: "河北" }, { value: 20, name: "江苏" }, { value: 25, name: "浙江" }, { value: 30, name: "四川" }, { value: 42, name: "湖北" } ], // 修饰饼形图文字相关的样式 label对象 label: { fontSize: 10 }, // 修饰引导线样式 labelLine: { // 连接到图形的线长度 length: 6, // 连接到文字的线长度 length2: 8 } } ] }; // 3. 配置项和数据给我们的实例化对象 myChart.setOption(option); // 4. 当我们浏览器缩放的时候，图表也等比例缩放 window.addEventListener("resize", function() { // 让我们的图表调用 resize这个方法 myChart.resize(); }); })(); 15-地图区域 (map) -预留布局html结构： <!-- 地图 --> <div class="map"> <h3> <span class="icon-cube"></span> 设备数据统计 </h3> <div class="chart"> <div class="geo"></div> </div> </div> css样式：/* 地图 */ .map { height: 7.225rem; margin-bottom: 0.25rem; display: flex; flex-direction: column; } .map h3 { line-height: 1; padding: 0.2rem 0; margin: 0; font-size: 0.25rem; color: #fff; font-weight: 400; } .map .icon-cube { color: #68d8fe; } .map .chart { flex: 1; background-color: rgba(255, 255, 255, 0.05); } .map .geo { width: 100%; height: 100%; } 注意第二列（column) 有个外边距（上面 32px 左右 20px 下是 0）.viewport .column:nth-child(2) { flex: 4; margin: .4rem .25rem 0; } 16-用户统计 (users) -布局html结构： <!-- 用户 --> <div class="users panel"> <div class="inner"> <h3>全国用户总量统计</h3> <div class="chart"> <div class="bar"></div> <div class="data"> <div class="item"> <h4>120,899</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 用户总量 </span> </div> <div class="item"> <h4>248</h4> <span> <i class="icon-dot" style="color: #eacf19"></i> 本月新增 </span> </div> </div> </div> </div> </div> css样式：/* 用户模块 */ .users { height: 4.25rem; display: flex; } .users .chart { display: flex; margin-top: .3rem; } .users .bar { width: 7.35rem; height: 3rem; } .users .data { display: flex; flex-direction: column; justify-content: space-between; width: 2.1rem; padding: .45rem .375rem; box-sizing: border-box; background-image: url(../images/rect.png); background-size: cover; } .users h4 { margin-bottom: .15rem; font-size: .35rem; color: #fff; } .users span { display: block; color: #4c9bfd; font-size: 0.2rem; } 17-用户统计 (users) -柱状图实现步骤： 从官方示例中找到最接近项目需求的例子，适当修改, 引入到HTML页面中 按照产品需求，来定制图表。 第一步：参考官方示例 + 分析(function () { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".bar")); // 2. 指定配置和数据 var option = { // 工具提示 tooltip: { // 触发类型 经过轴触发axis 经过轴触发item trigger: 'axis', // 轴触发提示才有效 axisPointer: { // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果 type: 'shadow' } }, // 图表边界控制 grid: { // 距离 上右下左 的距离 left: '3%', right: '4%', bottom: '3%', // 是否包含文本 containLabel: true }, // 控制x轴 xAxis: [ { // 使用类目，必须有data属性 type: 'category', // 使用 data 中的数据设为刻度文字 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 刻度设置 axisTick: { // true意思：图形在刻度中间 // false意思：图形在刻度之间 alignWithLabel: true } } ], // 控制y轴 yAxis: [ { // 使用数据的值设为刻度文字 type: 'value' } ], // 控制x轴 series: [ { // 图表数据名称 name: '用户统计', // 图表类型 type: 'bar', // 柱子宽度 barWidth: '60%', // 数据 data: [10, 52, 200, 334, 390, 330, 220] } ] }; // 3. 把配置给实例对象 myChart.setOption(option); })(); 第二步：按照需求修改 需求1： 修改柱子的颜色 // 修改线性渐变色方式 1 color: new echarts.graphic.LinearGradient( // (x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0, color: '#00fffb' }, // 0 起始颜色 { offset: 1, color: '#0061ce' } // 1 结束颜色 ] ), // 修改线性渐变色方式 2 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, 需求2： 提示框组件放到柱子上触发， 没有阴影等效果 //提示框组件 tooltip: { trigger: 'item', // axisPointer: { // 坐标轴指示器，坐标轴触发有效 这个模块我们此时不需要删掉即可 // type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // } }, 需求3： 修改柱形图表大小， 以及相关网格。 饼形图修改图表大小是通过 series 对象里面的 radius 柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等 显示网格 show: true，网格颜色是 borderColor // 直角坐标系内绘图网格（区域） grid: { top: '3%', right: '3%', bottom: '3%', left: '0%', // 图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系 containLabel: true, // 是否显示直角坐标系网格 show: true, //grid 四条边框的颜色 borderColor: 'rgba(0, 240, 255, 0.3)' }, 需求4： X 轴调整 柱子在刻度之间 剔除刻度不显示 刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置 修改x轴线的颜色 axisLine 里面的 lineStyle // 控制x轴 xAxis: [ { // 使用类目，必须有data属性 type: 'category', // 使用 data 中的数据设为刻度文字 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 刻度设置 axisTick: { // true意思：图形和刻度居中中间 // false意思：图形在刻度之间 alignWithLabel: false, // 不显示刻度 show: false }, // x坐标轴文字标签样式设置 axisLabel: { color: '#4c9bfd' }, // x坐标轴颜色设置 axisLine:{ lineStyle:{ color:'rgba(0, 240, 255, 0.3)', // width:8, x轴线的粗细 // opcity: 0, 如果不想显示x轴线 则改为 0 } } } 需求5： Y 轴调整 剔除刻度不显示 Y轴文字颜色 #4c9bfd 通过 axisLabel 对象设置 Y轴分割线颜色 splitLine 对象里面 lineStyle 对象设置 // 控制y轴 yAxis: [ { // 使用类目，必须有data属性 type: 'category', // 使用 data 中的数据设为刻度文字 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 刻度设置 axisTick: { // 不显示刻度 show: false }, // y坐标轴文字标签样式设置 axisLabel: { color: '#4c9bfd' }, // y坐标轴颜色设置 axisLine:{ lineStyle:{ color:'rgba(0, 240, 255, 0.3)', // width:8, x轴线的粗细 // opcity: 0, 如果不想显示x轴线 则改为 0 } }, // y轴 分割线的样式 splitLine: { lineStyle: { color: 'rgba(0, 240, 255, 0.3)' } } ], 需求6：调整数据，与省略图形定制 // series data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240] // xAxis data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'] 省略图形 经过图形才显示提示，且省略的柱子不需要提示 图形单独设置颜色 // 中间省略的数据 准备三项 var item = { name:'', value: 1200, // 柱子颜色 itemStyle: { color: '#254065' }, // 鼠标经过柱子颜色 emphasis: { itemStyle: { color: '#254065' } }, // 工具提示隐藏 tooltip: { extraCssText: 'opacity:0' }, } // series配置data选项在中使用 data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240], // 4. 当我们浏览器缩放的时候，图表也等比例缩放 window.addEventListener("resize", function() { // 让我们的图表调用 resize这个方法 myChart.resize(); }); 18-订单区域（order）-布局html结构： <!-- 订单 --> <div class="order panel"> <div class="inner"> <!-- 筛选 --> <div class="filter"> <a href="javascript:;" class="active">365天</a> <a href="javascript:;" >90天</a> <a href="javascript:;" >30天</a> <a href="javascript:;" >24小时</a> </div> <!-- 数据 --> <div class="data"> <div class="item"> <h4>20,301,987</h4> <span> <i class="icon-dot" style="color: #ed3f35;"></i> 订单量 </span> </div> <div class="item"> <h4>99834</h4> <span> <i class="icon-dot" style="color: #eacf19;"></i> 销售额(万元) </span> </div> </div> </div> </div> css样式：/* 订单 */ .order { height: 1.875rem; } .order .filter { display: flex; } .order .filter a { display: block; height: 0.225rem; line-height: 1; padding: 0 0.225rem; color: #1950c4; font-size: 0.225rem; border-right: 0.025rem solid #00f2f1; } .order .filter a:first-child { padding-left: 0; } .order .filter a:last-child { border-right: none; } .order .filter a.active { color: #fff; font-size: 0.25rem; } .order .data { display: flex; margin-top: 0.25rem; } .order .item { width: 50%; } .order h4 { font-size: 0.35rem; color: #fff; margin-bottom: 0.125rem; } .order span { display: block; color: #4c9bfd; font-size: 0.2rem; } 18-订单区域（order）-效果 ( 课后作业 )实现步骤： 提前准备数据 点击后切tab激活样式 点击后切换数据内容 开启定时器动态切换数据 // 订单功能 (function(){ // 1. 准备数据 var data = { day365: { orders: '20,301,987', amount: '99834' }, day90: { orders: '301,987', amount: '9834' }, day30: { orders: '1,987', amount: '3834' }, day1: { orders: '987', amount: '834' } } // 获取显示 订单数量 容器 var $h4Orders = $('.order h4:eq(0)') // 获取显示 金额数量 容器 var $h4Amount = $('.order h4:eq(1)') $('.order').on('click','.filter a',function(){ // 2. 点击切换激活样式 $(this).addClass('active').siblings().removeClass('active') // 3. 点击切换数据 var currdata = data[this.dataset.key] $h4Orders.html(currdata.orders) $h4Amount.html(currdata.amount) }) // 4. 开启定时器切换数据 var index = 0 var $allTab = $('.order .filter a') setInterval(function(){ index ++ if (index >= 4) index = 0 $allTab.eq(index).click() },5000) })(); 19-销售统计( sales )-布局html结构： <!-- 销售额 --> <div class="sales panel"> <div class="inner"> <div class="caption"> <h3>销售额统计</h3> <a href="javascript:;" class="active" >年</a> <a href="javascript:;" >季</a> <a href="javascript:;" >月</a> <a href="javascript:;" >周</a> </div> <div class="chart"> <div class="label">单位:万</div> <div class="line"></div> </div> </div> </div> css样式：/* 销售区域 */ .sales { height: 3.1rem; } .sales .caption { display: flex; line-height: 1; } .sales h3 { height: 0.225rem; padding-right: 0.225rem; border-right: 0.025rem solid #00f2f1; } .sales a { padding: 0.05rem; font-size: 0.2rem; margin: -0.0375rem 0 0 0.2625rem; border-radius: 0.0375rem; color: #0bace6; } .sales a.active { background-color: #4c9bfd; color: #fff; } .sales .inner { display: flex; flex-direction: column; } .sales .chart { flex: 1; padding-top: 0.1875rem; position: relative; } .sales .label { position: absolute; left: 0.525rem; top: 0.225rem; color: #4996f5; font-size: 0.175rem; } .sales .line { width: 100%; height: 100%; } 19-销售统计( sales )-线形图实现步骤： 寻找官方的类似示例，给予分析, 引入到HTML页面中 按照需求来定制它。 **第一步：**寻找官方的类似示例，给予分析。官方参考示例：https://www.echartsjs.com/examples/zh/editor.html?c=line-stack// 销售统计模块 (function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".line")); // 2. 指定配置和数据 var option = { tooltip: { trigger: "axis" }, legend: { data: ["邮件营销", "联盟广告"] }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: { type: "category", boundaryGap: false, data: ["周一", "周二"] }, yAxis: { type: "value" }, series: [ { name: "邮件营销", type: "line", stack: "总量", data: [120, 132, 101, 134, 90, 230, 210] }, { name: "联盟广告", type: "line", stack: "总量", data: [220, 182, 191, 234, 290, 330, 310] } ] }; // 3. 把配置和数据给实例对象 myChart.setOption(option); })(); **第二步：**按照需求来定制它。 需求1： 修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。 // 设置网格样式 grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', show: true,// 显示边框 borderColor: '#012f4a',// 边框颜色 containLabel: true // 包含刻度文字在内 }, 需求2： 修改图例组件中的文字颜色 #4c9bfd， 距离右侧 right 为 10% // 图例组件 legend: { textStyle: { color: '#4c9bfd' // 图例文字颜色 }, right: '10%' // 距离右边10% }, 需求3： x轴相关配置 刻度去除 x轴刻度标签字体颜色：#4c9bfd 剔除坐标轴线颜色（将来使用Y轴分割线) 轴两端是不需要内间距 boundaryGap xAxis: { type: 'category', data: ["周一", "周二"], axisTick: { show: false // 去除刻度线 }, axisLabel: { color: '#4c9bfd' // 文本颜色 }, axisLine: { show: false // 去除轴线 }, boundaryGap: false // 去除轴内间距 }, 需求4： y轴的定制 刻度去除 字体颜色：#4c9bfd 分割线颜色：#012f4a yAxis: { type: 'value', axisTick: { show: false // 去除刻度 }, axisLabel: { color: '#4c9bfd' // 文字颜色 }, splitLine: { lineStyle: { color: '#012f4a' // 分割线颜色 } } }, 需求5： 两条线形图定制 颜色分别：#00f2f1 #ed3f35 把折线修饰为圆滑 series 数据中添加 smooth 为 true color: ['#00f2f1', '#ed3f35'], series: [{ name:'预期销售额', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', // 折线修饰为圆滑 smooth: true, },{ name:'实际销售额', data: [100, 331, 200, 123, 233, 543, 400], type: 'line', smooth: true, }] 需求6： 配置数据 // x轴的文字 xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 图标数据 series: [{ name:'预期销售额', data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], type: 'line', smooth: true },{ name:'实际销售额', data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79], type: 'line', smooth: true } }] 总结：现在给的是年份数据，还需要切换效果。19-销售统计( sales )-切换效果实现步骤： 准备切换需要依赖的数据 4组 绑定点击事件 切换激活 tab 的样式 切换图表依赖的数据（重新渲染图表） 开启定时器，进行切换， 鼠标经过sales停止定时器，离开开启定时器 第一步：准备数据，使用数据 var data = { year: [ [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ], quarter: [ [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38], [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34] ], month: [ [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36], [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98] ], week: [ [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53], [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24] ] } series: [{ name:'预期销售额', data: data.year[0], type: 'line', smooth: true, itemStyle: { color: '#00f2f1' } },{ name:'实际销售额', data: data.year[1], type: 'line', smooth: true, itemStyle: { color: '#ed3f35' } }] 第二步：点击后切换 // 切换 $('.sales').on('click', '.caption a', function(){ // 样式 $(this).addClass('active').siblings().removeClass('active') // currData 当前对应的数据 // this.dataset.type 标签上的data-type属性值，对应data中的属性 var currData = data[this.dataset.type] // 修改图表1的数据 option.series[0].data = currData[0] // 修改图表2的数据 option.series[1].data = currData[1] // 重新设置数据 让图标重新渲染 myChart.setOption(option) }) 第三步：tab栏自动切换效果 开启定时器每隔3s，自动让a触发点击事件即可 鼠标经过sales，关闭定时器，离开开启定时器 var as = $(".sales .caption a"); var index = 0; var timer = setInterval(function() { index++; if (index >= 4) index = 0; as.eq(index).click(); }, 1000); // 鼠标经过sales，关闭定时器，离开开启定时器 $(".sales").hover( function() { clearInterval(timer); }, function() { clearInterval(timer); timer = setInterval(function() { index++; if (index >= 4) index = 0; as.eq(index).click(); }, 1000); } ); 自动缩放 // 当我们浏览器缩放的时候，图表也等比例缩放 window.addEventListener("resize", function() { // 让我们的图表调用 resize这个方法 myChart.resize(); }); 20-渠道区域&销售进度-布局html结构： <!-- 渠道 季度 --> <div class="wrap"> <div class="channel panel"> <div class="inner"> <h3>渠道分布</h3> <div class="data"> <div class="radar"></div> </div> </div> </div> <div class="quarter panel"> <div class="inner"> <h3>一季度销售进度</h3> <div class="chart"> <div class="box"> <div class="gauge"></div> <div class="label">75<small> %</small></div> </div> <div class="data"> <div class="item"> <h4>1,321</h4> <span> <i class="icon-dot" style="color: #6acca3"></i> 销售额(万元) </span> </div> <div class="item"> <h4>150%</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 同比增长 </span> </div> </div> </div> </div> </div> </div> css样式：/* 渠道区块 */ .wrap { display: flex; } .channel, .quarter { flex: 1; height: 2.9rem; } .channel { margin-right: 0.25rem; } .channel .data { overflow: hidden; } .channel .data .radar { height: 2.1rem; width: 100%; background-color: pink; } .channel h4 { color: #fff; font-size: 0.4rem; margin-bottom: 0.0625rem; } .channel small { font-size: 50%; } .channel span { display: block; color: #4c9bfd; font-size: 0.175rem; } /* 季度区块 */ .quarter .inner { display: flex; flex-direction: column; margin: 0 -0.075rem; } .quarter .chart { flex: 1; padding-top: 0.225rem; } .quarter .box { position: relative; } .quarter .label { transform: translate(-50%, -30%); color: #fff; font-size: 0.375rem; position: absolute; left: 50%; top: 50%; } .quarter .label small { font-size: 50%; } .quarter .gauge { height: 1.05rem; } .quarter .data { display: flex; justify-content: space-between; } .quarter .item { width: 50%; } .quarter h4 { color: #fff; font-size: 0.3rem; margin-bottom: 0.125rem; } .quarter span { display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #4c9bfd; font-size: 0.175rem; } 21-渠道分布(channel)-雷达图实现步骤： 寻找官方的类似示例，给予分析，并引入到HTML页面中 按照需求来定制它 第一步： 参考类似实例： https://www.echartsjs.com/examples/zh/editor.html?c=radar-aqi(function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".radar")); // 2.指定配置 var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]]; var lineStyle = { normal: { width: 1, opacity: 0.5 } }; var option = { backgroundColor: "#161627", radar: { indicator: [ { name: "AQI", max: 300 }, { name: "PM2.5", max: 250 }, { name: "PM10", max: 300 }, { name: "CO", max: 5 }, { name: "NO2", max: 200 }, { name: "SO2", max: 100 } ], shape: "circle", splitNumber: 5, name: { textStyle: { color: "rgb(238, 197, 102)" } }, splitLine: { lineStyle: { color: [ "rgba(238, 197, 102, 0.1)", "rgba(238, 197, 102, 0.2)", "rgba(238, 197, 102, 0.4)", "rgba(238, 197, 102, 0.6)", "rgba(238, 197, 102, 0.8)", "rgba(238, 197, 102, 1)" ].reverse() } }, splitArea: { show: false }, axisLine: { lineStyle: { color: "rgba(238, 197, 102, 0.5)" } } }, series: [ { name: "北京", type: "radar", lineStyle: lineStyle, data: dataBJ, symbol: "none", itemStyle: { color: "#F9713C" }, areaStyle: { opacity: 0.1 } } ] }; // 3.把配置和数据给对象 myChart.setOption(option); })(); 第二步： 按照需求来定制它 需求1： 去掉背景颜色，调整雷达图大小 65% radar:{ center: ['50%', '50%'], // 外半径占据容器大小 radius: '65%', } 需求2： 指示器轴的分割段数为4条（4个圆圈）radar:{ center: ['50%', '50%'], // 外半径占据容器大小 radius: '65%', // 指示器轴的分割段数 splitNumber: 4, } 需求3： 雷达图分割线设为白色半透明 0.5 // 坐标轴在 grid 区域中的分隔线（圆圈） splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.5)', // width: 2, // type: 'dashed' } }, 需求4： 雷达图 坐标轴轴线相关设置(竖线) axisLine// 坐标轴轴线相关设置(竖线)axisLine axisLine: { show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.5)' // width: 1, // type: 'solid' } }, 需求5： 修饰雷达图文字颜色为 #4c9bfdname: { // 修饰雷达图文本颜色 textStyle: { color: '#4c9bfd' } }, 需求6： 修饰 区域填充样式 series 对象 区域填充的背景颜色设置为： rgba(238, 197, 102, 0.6) areaStyle: { color: 'rgba(238, 197, 102, 0.6)', }, 区域填充的线条颜色为白色 // 线条样式 lineStyle: { normal: { color: '#fff', // width: 1 } }, 需求7： 标记的图形(拐点）设置 注意 series 里面设置 用圆点显示， 拐点的大小设置为 5 小圆点设置为白色 在小圆点上显示相关数据，颜色设置为白色，10像素 // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等 symbol: 'circle', // 拐点的大小 symbolSize: 5, // 小圆点（拐点）设置为白色 itemStyle: { color: '#fff' }, // 在圆点上显示相关数据 label: { show: true, color: '#fff', fontSize: 10 }, 需求8： 鼠标经过显示提示框组件tooltip: { show: true, // 控制提示框组件的显示位置 position: ['60%', '10%'], }, 需求9： 更换数据 // 雷达图的指示器 内部填充数据 indicator: [ { name: '机场', max: 100 }, { name: '商场', max: 100 }, { name: '火车站', max: 100 }, { name: '汽车站', max: 100 }, { name: '地铁', max: 100 } ], data: [[90, 19, 56, 11, 34]], 整个代码// 销售渠道模块 雷达图 (function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".radar")); // 2.指定配置 var option = { tooltip: { show: true, // 控制提示框组件的显示位置 position: ["60%", "10%"] }, radar: { indicator: [ { name: "机场", max: 100 }, { name: "商场", max: 100 }, { name: "火车站", max: 100 }, { name: "汽车站", max: 100 }, { name: "地铁", max: 100 } ], // 修改雷达图的大小 radius: "65%", shape: "circle", // 分割的圆圈个数 splitNumber: 4, name: { // 修饰雷达图文字的颜色 textStyle: { color: "#4c9bfd" } }, // 分割的圆圈线条的样式 splitLine: { lineStyle: { color: "rgba(255,255,255, 0.5)" } }, splitArea: { show: false }, // 坐标轴的线修改为白色半透明 axisLine: { lineStyle: { color: "rgba(255, 255, 255, 0.5)" } } }, series: [ { name: "北京", type: "radar", // 填充区域的线条颜色 lineStyle: { normal: { color: "#fff", width: 1, opacity: 0.5 } }, data: [[90, 19, 56, 11, 34]], // 设置图形标记 （拐点） symbol: "circle", // 这个是设置小圆点大小 symbolSize: 5, // 设置小圆点颜色 itemStyle: { color: "#fff" }, // 让小圆点显示数据 label: { show: true, fontSize: 10 }, // 修饰我们区域填充的背景颜色 areaStyle: { color: "rgba(238, 197, 102, 0.6)" } } ] }; // 3.把配置和数据给对象 myChart.setOption(option); // 当我们浏览器缩放的时候，图表也等比例缩放 window.addEventListener("resize", function() { // 让我们的图表调用 resize这个方法 myChart.resize(); }); })(); 22-销售进度 (quarter) -饼状图实现步骤： 寻找官方的类似示例，给予分析,引入到HTML页面中 按照需求来定制它。 第一步：参考官方示例：https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut// 销售模块 饼形图 半圆形 设置方式 (function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".gauge")); // 2. 指定数据和配置 var option = { series: [ { name: "销售进度", type: "pie", radius: ["50%", "70%"], //是否启用防止标签重叠策略 // avoidLabelOverlap: false, labelLine: { normal: { show: false } }, data: [{ value: 100 }, { value: 100 }, { value: 200 }] } ] }; // 3. 把数据和配置给实例对象 myChart.setOption(option); })(); 第二步：进行定制需求1：改成半圆，图表大一些，让50%文字在中心。 var option = { series: [ { type: 'pie', // 放大图形 radius: ['130%', '150%'], // 移动下位置 套住50%文字 center: ['48%', '80%'], label: { normal: { show: false } }, // 起始角度，支持范围[0, 360] startAngle: 180, data: [ { value: 100 }, // 不需要名称 { value: 100,}, // 不需要名称 { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域 ] } ] } 需求2：鼠标经过无需变大，修改第一段颜色渐变#00c9e0->#005fc1，修改第二段颜色#12274d。 // 鼠标经过不变大 hoverOffset: 0, data: [ { value: 100, itemStyle: { // 颜色渐变#00c9e0->#005fc1 color: new echarts.graphic.LinearGradient( // (x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0, color: "#00c9e0" }, // 0 起始颜色 { offset: 1, color: "#005fc1" } // 1 结束颜色 ] ) } }, { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d 23-热销排行（top）-布局html结构： <!-- 排行榜 --> <div class="top panel"> <div class="inner"> <div class="all"> <h3>全国热榜</h3> <ul> <li> <i class="icon-cup1" style="color: #d93f36;"></i> 可爱多 </li> <li> <i class="icon-cup2" style="color: #68d8fe;"></i> 娃哈啥 </li> <li> <i class="icon-cup3" style="color: #4c9bfd;"></i> 喜之郎 </li> </ul> </div> <div class="province"> <h3>各省热销 <i class="date">// 近30日 //</i></h3> <div class="data"> <ul class="sup"> <li> <span>北京</span> <span>25,179 <s class="icon-up"></s></span> </li> <li> <span>河北</span> <span>23,252 <s class="icon-down"></s></span> </li> <li> <span>上海</span> <span>20,760 <s class="icon-up"></s></span> </li> <li> <span>江苏</span> <span>23,252 <s class="icon-down"></s></span> </li> <li> <span>山东</span> <span>20,760 <s class="icon-up"></s></span> </li> </ul> <ul class="sub"> <!-- <li><span></span><span> <s class="icon-up"></s></span></li> --> </ul> </div> </div> </div> </div> css样式：/* 排行榜 */ .top { height: 3.5rem; } .top .inner { display: flex; } .top .all { display: flex; flex-direction: column; width: 2.1rem; color: #4c9bfd; font-size: 0.175rem; vertical-align: middle; } .top .all ul { padding-left: 0.15rem; margin-top: 0.15rem; flex: 1; display: flex; flex-direction: column; justify-content: space-around; } .top .all li { overflow: hidden; } .top .all [class^="icon-"] { font-size: 0.45rem; vertical-align: middle; margin-right: 0.15rem; } .top .province { flex: 1; display: flex; flex-direction: column; color: #fff; } .top .province i { padding: 0 0.15rem; margin-top: 0.0625rem; float: right; font-style: normal; font-size: 0.175rem; color: #0bace6; } .top .province s { display: inline-block; transform: scale(0.8); text-decoration: none; } .top .province .icon-up { color: #dc3c33; } .top .province .icon-down { color: #36be90; } .top .province .data { flex: 1; display: flex; margin-top: 0.175rem; } .top .province ul { flex: 1; line-height: 1; margin-bottom: 0.175rem; } .top .province ul li { display: flex; justify-content: space-between; } .top .province ul span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .top .province ul.sup { font-size: 0.175rem; } .top .province ul.sup li { color: #4995f4; padding: 0.15rem; } .top .province ul.sup li.active { color: #a3c6f2; background-color: rgba(10, 67, 188, 0.2); } .top .province ul.sub { display: flex; flex-direction: column; justify-content: space-around; font-size: 0.15rem; background-color: rgba(10, 67, 188, 0.2); } .top .province ul.sub li { color: #52ffff; padding: 0.125rem 0.175rem; } .clock { position: absolute; top: -0.45rem; right: 0.5rem; font-size: 0.25rem; color: #0bace6; } .clock i { margin-right: 5px; font-size: 0.25rem; } @media screen and (max-width: 1600px) { .top span { transform: scale(0.9); } .top .province ul.sup li { padding: 0.125rem 0.15rem; } .top .province ul.sub li { padding: 0.0625rem 0.15rem; } .quarter span { transform: scale(0.9); } } 23-热销排行（top）-效果实现思路： 准备后台返回的真实数据 利用数据渲染各省热销模块 sup 模块 (拼接html格式字符串，进行渲染) 当鼠标进入 tab 的时候 激活当前的tab样式，删除其他tab的样式 渲染各省热销 sub 模块 (拼接html格式字符串，进行渲染) 默认激活第一个tab的效果 开启定时器，按依次切换 预备知识： 扩展知识：ES6模版字符 // 模版字符 var star = { name: "刘德华", age: 18 }; // 以前的写法 拼接的时候引号很容易出问题 console.log("我的名字是" + star.name + "我的年龄是" + star.age); // ES6 模板字符写法 console.log(`我的名字是${star.name}我的年龄是${star.age}`); console.log(`<span>${star.name}</span><span>${star.age}</span>`); 开始实现：第一步：得到后台数据（实际开发中，这个数据通过ajax请求获得） var hotData = [ { city: '北京', // 城市 sales: '25, 179', // 销售额 flag: true, // 上升还是下降 brands: [ // 品牌种类数据 { name: '可爱多', num: '9,086', flag: true }, { name: '娃哈哈', num: '8,341', flag: true }, { name: '喜之郎', num: '7,407', flag: false }, { name: '八喜', num: '6,080', flag: false }, { name: '小洋人', num: '6,724', flag: false }, { name: '好多鱼', num: '2,170', flag: true }, ] }, { city: '河北', sales: '23,252', flag: false, brands: [ { name: '可爱多', num: '3,457', flag: false }, { name: '娃哈哈', num: '2,124', flag: true }, { name: '喜之郎', num: '8,907', flag: false }, { name: '八喜', num: '6,080', flag: true }, { name: '小洋人', num: '1,724', flag: false }, { name: '好多鱼', num: '1,170', flag: false }, ] }, { city: '上海', sales: '20,760', flag: true, brands: [ { name: '可爱多', num: '2,345', flag: true }, { name: '娃哈哈', num: '7,109', flag: true }, { name: '喜之郎', num: '3,701', flag: false }, { name: '八喜', num: '6,080', flag: false }, { name: '小洋人', num: '2,724', flag: false }, { name: '好多鱼', num: '2,998', flag: true }, ] }, { city: '江苏', sales: '23,252', flag: false, brands: [ { name: '可爱多', num: '2,156', flag: false }, { name: '娃哈哈', num: '2,456', flag: true }, { name: '喜之郎', num: '9,737', flag: true }, { name: '八喜', num: '2,080', flag: true }, { name: '小洋人', num: '8,724', flag: true }, { name: '好多鱼', num: '1,770', flag: false }, ] }, { city: '山东', sales: '20,760', flag: true, brands: [ { name: '可爱多', num: '9,567', flag: true }, { name: '娃哈哈', num: '2,345', flag: false }, { name: '喜之郎', num: '9,037', flag: false }, { name: '八喜', num: '1,080', flag: true }, { name: '小洋人', num: '4,724', flag: false }, { name: '好多鱼', num: '9,999', flag: true }, ] } ] 第二步：根据数据渲染各省热销 sup 模块内容 删掉原先自带小li 遍历数据 $.each() 拼接字符串把数据渲染到 li 的span 里面 追加给 .sup 盒子 var supHTML = ""; $.each(hotData, function(index, item) { // console.log(item); supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class= ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`; }); $(".sup").html(supHTML); 第三步：当数据进入 tab 的时候 激活当前的tab样式，删除其他tab的样式 渲染各省热销 sub 模块 注意鼠标进入tab， 只遍历 当前索引号对应的 城市对象里面的 brands 拼接html格式字符串，进行渲染 第四步：默认激活第一个tab // 所有的LI var $lis = $('.province .sup li') // 第一个默认激活 $lis.eq(0).mouseenter() 第五步：开启定时切换 定时器里面 mouseenter 冲突问题的解决方案定时器里面不加mousenter 事件，而是直接重新渲染数据就可以(执行鼠标经过事件里面的代码)最好把渲染的代码封装到函数里面 var index = 0; var timer = setInterval(function() { index++; if (index >= 5) index = 0; // lis.eq(index).mouseenter(); render(lis.eq(index)); }, 2000); $(".province .sup").hover( // 鼠标经过事件 function() { clearInterval(timer); }, // 鼠标离开事件 function() { clearInterval(timer); timer = setInterval(function() { index++; if (index >= 5) index = 0; // lis.eq(index).mouseenter(); render(lis.eq(index)); }, 2000); } ); 24-Echarts-社区介绍社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。 在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。 25-Echarts-map使用（扩展）参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)实现步骤： 第一需要下载china.js提供中国地图的js文件 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入 使用社区提供的配置即可。 需要修改： 去掉图例组件和标题组件 去掉背景颜色 修改地图省份背景 #142957 地图放大通过 zoom 设置为1.2即可 geo: { map: 'china', zoom: 1.2, label: { emphasis: { show: false } }, roam: false, itemStyle: { normal: { areaColor: '#142957', borderColor: '#0692a4' }, emphasis: { areaColor: '#0b1c2d' } } }, 总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。26-总结总结：实现一个需求，需要去推导，具备推导的能力需要练习，时间问题。 -
jQuery事件操作 1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 语法演示代码<body> <div></div> <script> $(function() { // 1. 单个事件注册 $("div").click(function() { $(this).css("background", "purple"); }); $("div").mouseenter(function() { $(this).css("background", "skyblue"); }); }) </script> </body> 1.2. jQuery 事件处理 因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下： on(): 用于事件绑定，目前最好用的事件绑定方法 off(): 事件解绑 trigger() / triggerHandler(): 事件触发 1.2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()语法演示代码<body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> </ul> <ol></ol> <script> $(function() { // (1) on可以绑定1个或者多个事件处理程序 // $("div").on({ // mouseenter: function() { // $(this).css("background", "skyblue"); // }, // click: function() { // $(this).css("background", "purple"); // } // }); $("div").on("mouseenter mouseleave", function() { $(this).toggleClass("current"); }); // (2) on可以实现事件委托（委派） // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li // $("ul li").click(); $("ul").on("click", "li", function() { alert(11); }); // (3) on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11); }) var li = $("<li>我是后来创建的</li>"); $("ol").append(li); }) </script> </body> 1.2.2. 案例：发布微博案例1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。 代码实现略。(详情参考源代码)1.2.3. 事件处理 off() 解绑事件 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;语法演示代码<body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> </ul> <p>我是一个P标签</p> <script> $(function() { // 事件绑定 $("div").on({ click: function() { console.log("我点击了"); }, mouseover: function() { console.log('我鼠标经过了'); } }); $("ul").on("click", "li", function() { alert(11); }); // 1. 事件解绑 off // $("div").off(); // 这个是解除了div身上的所有事件 $("div").off("click"); // 这个是解除了div身上的点击事件 $("ul").off("click", "li"); // 2. one() 但是它只能触发事件一次 $("p").one("click", function() { alert(11); }) }) </script> </body> 1.2.4. 事件处理 trigger() 自动触发事件 有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;语法演示代码<body> <div></div> <input type="text"> <script> $(function() { // 绑定事件 $("div").on("click", function() { alert(11); }); // 自动触发事件 // 1. 元素.事件() // $("div").click();会触发元素的默认行为 // 2. 元素.trigger("事件") // $("div").trigger("click");会触发元素的默认行为 $("input").trigger("focus"); // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为 $("input").on("focus", function() { $(this).val("你好吗"); }); // 一个会获取焦点，一个不会 $("div").triggerHandler("click"); // $("input").triggerHandler("focus"); }); </script> </body> 1.3. jQuery 事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。语法演示代码<body> <div></div> <script> $(function() { $(document).on("click", function() { console.log("点击了document"); }) $("div").on("click", function(event) { // console.log(event); console.log("点击了div"); event.stopPropagation(); }) }) </script> </body> 注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。1.4. jQuery 拷贝对象 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。语法演示代码 <script> $(function() { // 1.合并数据 var targetObj = {}; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); // 2. 会覆盖 targetObj 里面原来的数据 var targetObj = { id: 0 }; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); }) </script> 1.5. jQuery 多库共存 实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。语法演示代码<script> $(function() { // 让jquery 释放对$ 控制权 让用自己决定 var suibian = jQuery.noConflict(); console.log(suibian("span")); }) </script> 1.6. jQuery 插件 jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。 jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤： 引入相关文件。（jQuery 文件 和 插件文件） 复制相关html、css、js (调用插件)。 1.4.1. 瀑布流插件（重点讲解） 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。下载位置代码演示 插件的使用三点： 1. 引入css. 2.引入JS 3.引入html。 （有的简单插件只需引入html和js，甚至有的只需引入js） 1.引入css. <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/default.css"> <!-- 下面的样式代码为页面布局，可以引入，也可以自己写，自己设计页面样式，一般为直接引入，方便 --> <style type="text/css"> #gallery-wrapper { position: relative; max-width: 75%; width: 75%; margin: 50px auto; } img.thumb { width: 100%; max-width: 100%; height: auto; } .white-panel { position: absolute; background: white; border-radius: 5px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); padding: 10px; } .white-panel h1 { font-size: 1em; } .white-panel h1 a { color: #A92733; } .white-panel:hover { box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); margin-top: -5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } </style> 2.引入js. <!-- 前两个必须引入 --> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/pinterest_grid.js"></script> <!-- 下面的为启动瀑布流代码，参数可调节属性，具体功能可参考readme.html --> <script type="text/javascript"> $(function() { $("#gallery-wrapper").pinterest_grid({ no_columns: 5, padding_x: 15, padding_y: 10, margin_bottom: 50, single_column_breakpoint: 700 }); }); </script> 3.引入html. <!-- html结构一般为事先写好，很难修改结构，但可以修改内容及图片的多少（article标签） --> <section id="gallery-wrapper"> <article class="white-panel"> <img src="images/P_000.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> <article class="white-panel"> <img src="images/P_005.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> <article class="white-panel"> <img src="images/P_006.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> <article class="white-panel"> <img src="images/P_007.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> </section> 总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）1.4.2. 图片懒加载插件 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。（下载略）代码演示 懒加载只需引入html 和 js操作 即可，此插件不涉及css。 1.引入js <script src="js/EasyLazyload.min.js"></script> <script> lazyLoadInit({ showTime: 1100, onLoadBackEnd: function(i, e) { console.log("onLoadBackEnd:" + i); }, onLoadBackStart: function(i, e) { console.log("onLoadBackStart:" + i); } }); </script> 2.引入html <img data-lazy-src="upload/floor-1-3.png" alt=""> 1.4.3. 全屏滚动插件 全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：http://www.dowebok.com/demo/2014/77/代码演示 全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际项目需要使用哪种风格引入对应的HTML和CSS。<script src="js/jquery.min.js"></script> <script src="js/fullpage.min.js"></script> <script> $(function() { $('#dowebok').fullpage({ sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'], navigation: true }); }); </script> 注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。1.4.4. bootstrap组件 Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。 凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html代码演示 引入bootstrap相关css和js <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> 去官网复制html的功能模块 <div class="container"> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> 1.4.5. bootstrap插件（JS） bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。 步骤： 1.引入bootstrap相关css和js 2.去官网复制html 3.复制js代码，启动js插件。代码演示 引入bootstrap相关css和js <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> 去官网复制html的功能模块 <!-- 模态框 --> <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> 里面就是模态框 </div> </div> </div> 复制js代码，启动js插件。 <script> // 当我们点击了自己定义的按钮，就弹出模态框 $(".myBtn").on("click", function() { // alert(11); $('#btn').modal() }) </script> 1.4.6. bootstrap案例-阿里百秀1.通过调用组件实现导航栏2.通过调用插件实现登录3.通过调用插件标签页实现 tab 栏 代码实现略。(详情参考源代码)1.7. 综合案例: toDoList案例分析（代码略）1.7.1 案例：案例介绍// 1. 文本框里面输入内容，按下回车，就可以生成待办事项。 // 2. 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 // 3. 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 // 4. 但是本页面内容刷新页面不会丢失。 1.7.2 案例：toDoList 分析// 1. 刷新页面不会丢失数据，因此需要用到本地存储 localStorage // 2. 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据 // 3. 存储的数据格式：var todolist = [{ title : ‘xxx’, done: false}] // 4. 注意点1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。 // 5. 注意点2： 获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。 1.7.3 案例：toDoList 按下回车把新数据添加到本地存储里面// 1.切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。 // 2.利用事件对象.keyCode判断用户按下回车键（13）。 // 3.声明一个数组，保存数据。 // 4.先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。 // 5.之后把最新从表单获取过来的数据，追加到数组里面。 // 6.最后把数组存储给本地存储 (声明函数 savaDate()) 1.7.4 案例：toDoList 本地存储数据渲染加载到页面// 1.因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用 // 2.先要读取本地存储数据。（数据不要忘记转换为对象格式） // 3.之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。 // 4.每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。 1.7.5 案例：toDoList 删除操作// 1.点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。 // 2.核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li // 3.我们可以给链接自定义属性记录当前的索引号 // 4.根据这个索引号删除相关的数据----数组的splice(i, 1)方法 // 5.存储修改后的数据，然后存储给本地存储 // 6.重新渲染加载数据列表 // 7.因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作// 1.当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。 // 2.点击之后，获取本地存储数据。 // 3.修改对应数据属性 done 为当前复选框的checked状态。 // 4.之后保存数据到本地存储 // 5.重新渲染加载数据列表 // 6.load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面 // 7.如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面 1.7.7 案例：toDoList 统计正在进行个数和已经完成个数// 1.在我们load 函数里面操作 // 2.声明2个变量 ：todoCount 待办个数 doneCount 已完成个数 // 3.当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++ // 4.最后修改相应的元素 text() 1.8. 今日总结
-
jQuery操作 1.1. jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ;1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。语法 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。1.1.2 元素自定义属性值 attr() 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。语法 注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）1.1.3 数据缓存 data() data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。语法 注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。演示代码<body> <a href="http://www.itcast.cn" title="都挺好">都挺好</a> <input type="checkbox" name="" id="" checked> <div index="1" data-index="2">我是div</div> <span>123</span> <script> $(function() { //1. element.prop("属性名") 获取元素固有的属性值 console.log($("a").prop("href")); $("a").prop("title", "我们都挺好"); $("input").change(function() { console.log($(this).prop("checked")); }); // console.log($("div").prop("index")); // 2. 元素的自定义属性 我们通过 attr() console.log($("div").attr("index")); $("div").attr("index", 4); console.log($("div").attr("data-index")); // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面 $("span").data("uname", "andy"); console.log($("span").data("uname")); // 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型 console.log($("div").data("index")); }) </script> </body> 1.1.4 案例：购物车案例模块-全选1.全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。2.因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。3.把全选按钮状态赋值给3小复选框就可以了。4.当我们每次点击小的复选框按钮，就来判断：5.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。6.:checked 选择器 :checked 查找被选中的表单元素。 代码实现略。(详情参考源代码)1.2. jQuery 文本属性值 jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。1.2.1 jQuery内容文本值 常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。语法 注意：html() 可识别标签，text() 不识别标签。演示代码<body> <div> <span>我是内容</span> </div> <input type="text" value="请输入内容"> <script> // 1. 获取设置元素内容 html() console.log($("div").html()); // $("div").html("123"); // 2. 获取设置元素文本内容 text() console.log($("div").text()); $("div").text("123"); // 3. 获取设置表单值 val() console.log($("input").val()); $("input").val("123"); </script> </body> 1.2.2. 案例：购物车案例模块-增减商品数量1.核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。2.注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。3.修改表单的值是val() 方法4.注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值5.减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。 代码实现略。(详情参考源代码)1.2.3. 案例：购物车案例模块-修改商品小计1.核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计2.注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）3.修改普通元素的内容是text() 方法4.注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)5.parents(‘选择器’) 可以返回指定祖先元素6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法7.用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计 代码实现略。(详情参考源代码)1.3. jQuery 元素操作 jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。1.3.1. 遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。语法1 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。语法2 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。演示代码<body> <div>1</div> <div>2</div> <div>3</div> <script> $(function() { // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大） var sum = 0; var arr = ["red", "green", "blue"]; // 1. each() 方法遍历元素 $("div").each(function(i, domEle) { // 回调函数第一个参数一定是索引号 可以自己指定索引号号名称 // console.log(i); // 回调函数第二个参数一定是 dom 元素对象，也是自己命名 // console.log(domEle); // 使用jQuery方法需要转换 $(domEle) $(domEle).css("color", arr[i]); sum += parseInt($(domEle).text()); }) console.log(sum); // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据 // $.each($("div"), function(i, ele) { // console.log(i); // console.log(ele); // }); // $.each(arr, function(i, ele) { // console.log(i); // console.log(ele); // }) $.each({ name: "andy", age: 18 }, function(i, ele) { console.log(i); // 输出的是 name age 属性名 console.log(ele); // 输出的是 andy 18 属性值 }) }) </script> </body> 1.3.2. 案例：购物车案例模块-计算总计和总额1.把所有文本框中的值相加就是总额数量，总计同理。2.文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。 代码实现略。(详情参考源代码)1.3.3. 创建、添加、删除 jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：语法总和 注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。案例代码<body> <ul> <li>原先的li</li> </ul> <div class="test">我是原先的div</div> <script> $(function() { // 1. 创建元素 var li = $("<li>我是后来创建的li</li>"); // 2. 添加元素 // 2.1 内部添加 // $("ul").append(li); 内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面 // 2.2 外部添加 var div = $("<div>我是后妈生的</div>"); // $(".test").after(div); $(".test").before(div); // 3. 删除元素 // $("ul").remove(); 可以删除匹配的元素 自杀 // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子 }) </script> </body> 1.3.4 案例：购物车案例模块-删除商品模块1.核心思路：把商品remove() 删除元素即可2.有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车3.商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发4.删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品5.清理购物车： 则是把所有的商品全部删掉 代码实现略。(详情参考源代码)1.3.5 案例：购物车案例模块-选中商品添加背景1.核心思路：选中的商品添加背景，不选中移除背景即可2.全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景3.小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景4.这个背景，可以通过类名修改，添加类和删除类 代码实现略。(详情参考源代码)1.4. jQuery 尺寸、位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。1.4.1. jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。语法代码演示<body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width()); // $("div").width(300); // 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小 console.log($("div").innerWidth()); // 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小 console.log($("div").outerWidth()); // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin console.log($("div").outerWidth(true)); }) </script> </body> 注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。1.4.2. jQuery 位置操作 jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:语法代码演示<body> <div class="father"> <div class="son"></div> </div> <div class="back">返回顶部</div> <div class="container"></div> <script> $(function() { // 1. 获取设置距离文档的位置（偏移） offset console.log($(".son").offset()); console.log($(".son").offset().top); // $(".son").offset({ // top: 200, // left: 200 // }); // 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准 // 这个方法只能获取不能设置偏移 console.log($(".son").position()); // $(".son").position({ // top: 200, // left: 200 // }); // 3. 被卷去的头部 $(document).scrollTop(100); // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() // 页面滚动事件 var boxTop = $(".container").offset().top; $(window).scroll(function() { // console.log(11); console.log($(document).scrollTop()); if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部 $(".back").click(function() { // $(document).scrollTop(0); $("body, html").stop().animate({ scrollTop: 0 }); // $(document).stop().animate({ // scrollTop: 0 // }); 不能是文档而是 html和body元素做动画 }) }) </script> </body> 1.4.3. 案例：带有动画的返回顶部1.核心原理： 使用animate动画返回顶部。2.animate动画函数里面有个scrollTop 属性，可以设置位置3.但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0}) 代码实现略。(详情参考源代码)1.4.4. 案例： 品优购电梯导航（上）1.当我们滚动到 今日推荐 模块，就让电梯导航显示出来2.点击电梯导航页面可以滚动到相应内容区域3.核心算法：因为电梯导航模块和内容区模块一一对应的4.当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号5.就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top6.然后执行动画即可 代码实现略。(详情参考源代码)1.4.5. 案例：品优购电梯导航（下）1.当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名2.当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。3.触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。4.需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号5.判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top6.就利用这个索引号找到相应的电梯导航小li添加类。 代码实现略。(详情参考源代码)1.5. 今日总结
-
jQuery简介 1.1. jQuery 介绍1.1.1 JavaScript 库 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。1.1.2 jQuery的概念 jQuery总体概况如下 : jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 学习jQuery本质： 就是学习调用这些函数（方法）。 jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。 1.1.3 jQuery的优点 轻量级。核心文件才几十kb，不会影响页面加载速度。 跨浏览器兼容，基本兼容了现在主流的浏览器。 链式编程、隐式迭代。 对事件、样式、动画支持，大大简化了DOM操作。 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。 免费、开源。 1.2. jQuery 的基本使用1.2.1 jQuery 的下载 jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。各个版本的下载：https://code.jquery.com/ 版本介绍：1x ：兼容 IE 678 等低版本浏览器， 官网不再更新2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本1.2.2. 体验jQuery 步骤： 引入jQuery文件。 在文档最末尾插入 script 标签，书写体验代码。 $('div').hide() 可以隐藏盒子。 1.2.3. jQuery的入口函数 jQuery中常见的两种入口函数：// 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); 总结： 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。 相当于原生 js 中的 DOMContentLoaded。 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 更推荐使用第一种方式。 1.2.4. jQuery中的顶级对象$ $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。 $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。 1.2.5. jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象。 jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。 注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。1.2.6. jQuery 对象和 DOM 对象转换 DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。// 1.DOM对象转换成jQuery对象，方法只有一种 var box = document.getElementById('box'); // 获取DOM对象 var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象 // 2.jQuery 对象转换为 DOM 对象有两种方法： // 2.1 jQuery对象[索引值] var domObject1 = $('div')[0] // 2.2 jQuery对象.get(索引值) var domObject2 = $('div').get(0) 总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。1.3. jQuery 选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。1.3.1. 基础选择器$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号 1.3.2. 层级选择器 层级选择器最常用的两个分别为：后代选择器和子代选择器。 基础选择器和层级选择器案例代码<body> <div>我是div</div> <div class="nav">我是nav div</div> <p>我是p</p> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> <script> $(function() { console.log($(".nav")); console.log($("ul li")); }) </script> </body> 1.3.3. 筛选选择器 筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :案例代码<body> <ul> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ul> <ol> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ol> <script> $(function() { $("ul li:first").css("color", "red"); $("ul li:eq(2)").css("color", "blue"); $("ol li:odd").css("color", "skyblue"); $("ol li:even").css("color", "pink"); }) </script> </body> 另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。偏重于记忆，演示代码略。1.3.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。 $(this).css(“color”,”red”); $(this).siblings(). css(“color”,””); 隐式迭代 // 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。 // 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。 $('div').hide(); // 页面中所有的div全部隐藏，不用循环操作 链式编程 // 链式编程是为了节省代码量，看起来更优雅。 $(this).css('color', 'red').sibling().css('color', ''); 1.3.5 案例：淘宝服饰精品案例思路分析:1.核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。2.需要得到当前小li 的索引号，就可以显示对应索引号的图片3.jQuery 得到当前元素索引号 $(this).index()4.中间对应的图片，可以通过 eq(index) 方法去选择5.显示元素 show() 隐藏元素 hide() 代码实现略。(详情参考源代码)1.4. jQuery 样式操作 jQuery中常用的样式操作有两种：css() 和 设置类样式方法1.4.1. 方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。 常用以下三种形式 :// 1.参数只写属性名，则是返回属性值 var strColor = $(this).css('color'); // 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css(''color'', ''red''); // 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号 $(this).css({ "color":"white","font-size":"20px"}); 注意：css() 多用于样式少时操作，多了则不太方便。1.4.2. 方法2: 设置类样式方法 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。 常用的三种设置类样式方法：// 1.添加类 $("div").addClass("current"); // 2.删除类 $("div").removeClass("current"); // 3.切换类 $("div").toggleClass("current"); 注意： 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。 1.4.3. 案例：tab 栏切换思路分析:1.点击上部的li，当前li 添加current类，其余兄弟移除类。2.点击的同时，得到当前li 的索引号3.让下部里面相应索引号的item显示，其余的item隐藏 代码实现略。(详情参考源代码)1.5. jQuery 效果 jQuery 给我们封装了很多动画效果，最为常见的如下： 显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; 注意：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。jQuery为我们提供另一个方法，可以停止动画排队：stop() ;1.5.1. 显示隐藏 显示隐藏动画，常见有三个方法：show() / hide() / toggle() ; 语法规范如下:代码演示<body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { $("div").show(1000, function() { alert(1); }); }) $("button").eq(1).click(function() { $("div").hide(1000, function() { alert(1); }); }) $("button").eq(2).click(function() { $("div").toggle(1000); }) // 一般情况下，我们都不加参数直接显示隐藏就可以了 }); </script> </body> 1.5.2. 滑入滑出 滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ; 语法规范如下:代码演示<body> <button>下拉滑动</button> <button>上拉滑动</button> <button>切换滑动</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { // 下滑动 slideDown() $("div").slideDown(); }) $("button").eq(1).click(function() { // 上滑动 slideUp() $("div").slideUp(500); }) $("button").eq(2).click(function() { // 滑动切换 slideToggle() $("div").slideToggle(500); }); }); </script> </body> 小案例：下拉菜单略（详情参看源码）。1.5.3 淡入淡出 淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 语法规范如下:代码演示<body> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切换</button> <button>修改透明度</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { // 淡入 fadeIn() $("div").fadeIn(1000); }) $("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut(1000); }) $("button").eq(2).click(function() { // 淡入淡出切换 fadeToggle() $("div").fadeToggle(1000); }); $("button").eq(3).click(function() { // 修改透明度 fadeTo() 这个速度和透明度要必须写 $("div").fadeTo(1000, 0.5); }); }); </script> </body> 1.5.4 自定义动画 自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ; 语法规范如下:代码演示<body> <button>动起来</button> <div></div> <script> $(function() { $("button").click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }) }) </script> </body> 1.5.5 停止动画排队 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 停止动画排队的方法为：stop() ; stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。 总结: 每次使用动画之前，先调用 stop() ,在调用动画。1.5.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下语法hover([over,]out) // 其中over和out为两个函数 over:鼠标移到元素上要触发的函数（相当于mouseenter） out:鼠标移出元素要触发的函数（相当于mouseleave） 如果只写一个函数，则鼠标经过和离开都会触发它 hover事件和停止动画排列案例<body> <ul class="nav"> <li> <a href="#">微博</a> <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul> </li> <li> <a href="#">微博</a> <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul> </li> </ul> <script> $(function() { // 鼠标经过 // $(".nav>li").mouseover(function() { // // $(this) jQuery 当前元素 this不要加引号 // // show() 显示元素 hide() 隐藏元素 // $(this).children("ul").slideDown(200); // }); // // 鼠标离开 // $(".nav>li").mouseout(function() { // $(this).children("ul").slideUp(200); // }); // 1. 事件切换 hover 就是鼠标经过和离开的复合写法 // $(".nav>li").hover(function() { // $(this).children("ul").slideDown(200); // }, function() { // $(this).children("ul").slideUp(200); // }); // 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数 $(".nav>li").hover(function() { // stop 方法必须写到动画的前面 $(this).children("ul").stop().slideToggle(); }); }) </script> </body> 1.5.7. 案例：王者荣耀手风琴效果思路分析:1.鼠标经过某个小li 有两步操作：2.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入3.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出 代码实现略。(详情参考源代码)1.6. 今日总结
