js插件让你开发更简便

转x33g5p2x  于2022-01-09 转载在 其他  
字(17.0k)|赞(0)|评价(0)|浏览(287)

js插件让你开发更简便

Swiper插件开发苹果官网

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

目标：使用Swiper插件模拟开发苹果官网。

实现步骤：

选择演示案例

进入官网，点击导航栏在线演示 -> Swiper基础演示

寻找你喜欢的轮播图，然后点击在新窗口打开

查看源代码

鼠标右键查看网页源代码，查看所需的css和js文件

下载资源

下载所需的资源文件，点击导航栏获取Swiper -> 下载Swiper

完成案例

下载资源以后，解压并在swiper-master\package路径下找到对应的css和js文件，创建apple项目导入css和js文件以及所需的图片素材，将刚才第3步查看的源代码全部复制粘贴过来，修改css和js文件的路径为自己的本地文件路径，然后按照苹果官网完成自己的案例，少年，动起来吧。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="css/swiper.min.css">

		<!-- Demo styles -->
		<style> /* 设置所有标签的内外边距为0 */ * { margin: 0; padding: 0; } html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; overflow: hidden;/* 超出body部分隐藏 */ } .swiper-container { width: 100%; height: 100%; position: absolute;/* 绝对定位 */ } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 90%; } /* 最后修改.swiper-container样式使用position: absolute;绝对定位 */ /* * 设置广告栏的背景色和高度 * 直接从苹果官网获取具体数据值 */ .ad { background: rgb(68, 68, 68); height: 45px; } /* * 设置广告栏的宽度，方便右浮动 */ .ad ul { width: 1280px; } /* * 设置广告栏的li的样式 */ .ad ul li { /* 去除无序列表的默认列表样式 */ list-style: none; /* 字体颜色从苹果官网获取具体数据值 */ color: #a8a8aa; /* 字体大小 */ font-size: 12px; /* 右浮动 */ float: right; /* 行间距 */ line-height: 45px; } /* * 设置导航栏的背景色和高度 * 直接从苹果官网获取具体数据值 */ .nav { background: rgb(50, 50, 50); height: 50px; } /* * 设置导航栏的宽度，方便居中 */ .nav ul { width: 1200px; margin: 0 auto; } /* * 设置导航栏的li的样式 */ .nav ul li { /* 去除无序列表的默认列表样式 */ list-style: none; /* 左浮动 */ float: left; /* 字体颜色 */ color: white; /* 字体大小 */ font-size: 12px; /* 行间距 */ line-height: 50px; /* 设置外边距 */ margin: 0 50px; /* 鼠标变手势 */ cursor: pointer; } /* * 设置图片的宽高 */ .swiper-slide img { width: 100%; height: 100%; } </style>
	</head>

	<body>
		<!-- 广告栏 -->
		<div class="ad">
			<ul>
				<li>&lt;广告&gt;</li>
			</ul>
		</div>
		<!-- 导航栏 -->
		<div class="nav">
			<ul>
				<li><img src="img/apple.svg" /></li>
				<li>Mac</li>
				<li>iPad</li>
				<li>iPhone</li>
				<li>Watch</li>
				<li>Music</li>
				<li>技术支持</li>
				<li><img src="img/search.svg" /></li>
				<li><img src="img/cart.svg" /></li>
			</ul>
		</div>
		
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/1.png" /></div>
				<div class="swiper-slide"><img src="img/2.png" /></div>
				<div class="swiper-slide"><img src="img/3.png" /></div>
				<div class="swiper-slide"><img src="img/4.png" /></div>
				<div class="swiper-slide"><img src="img/5.png" /></div>
				<div class="swiper-slide"><img src="img/6.png" /></div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>

		<!-- Swiper JS -->
		<script src="js/swiper.min.js"></script>

		<!-- Initialize Swiper -->
		<script> var swiper = new Swiper('.swiper-container', { direction: 'vertical', pagination: { el: '.swiper-pagination', clickable: true, }, }); </script>
	</body>

</html>

演示效果：

Echarts插件制作柱状图、饼图报表

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

目标：使用ECharts插件制作图形报表。

实现步骤：

查看教程

进入官网，点击导航栏文档 ->教程

下载资源

从官网下载界面选择你需要的版本下载。

或者使用 CDN 的方式引入。

引入ECharts

像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入 ECharts 文件 -->
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>

	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
	</body>

</html>

这样你的第一个图表就诞生了！

完成案例

柱状图

接下来实现我们的柱状图报表，点击导航栏实例

选择柱状图 -> Multiple Y Axes

将DEMO下载至本地，并且导入到工具，然后完成自己的案例。

注意：将资源文件全部下载下来，没有网络的情况下也可以继续使用。

完整代码

<!DOCTYPE html>
<html style="height: 100%">

	<head>
		<meta charset="utf-8">
	</head>

	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>
		<!-- 将原来的js通过网页下载下来在本地使用 -->
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/echarts-gl.min.js"></script>
		<script type="text/javascript" src="js/ecStat.min.js"></script>
		<script type="text/javascript" src="js/dataTool.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/world.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<script type="text/javascript" src="js/bmap.min.js"></script>
		<script type="text/javascript" src="js/simplex.js"></script>
		<script type="text/javascript"> // 准备数据(可以自定义) var type = ['蒸发量', '降水量', '平均温度'];// legend的data数据和yAxis的name必须一致 var month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; var data1 = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];// 蒸发量数据 var data2 = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];// 降水量数据 var data3 = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2];// 平均温度数据 var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; app.title = '多 Y 轴示例'; var colors = ['#5793f3', '#d14a61', '#675bba']; option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { right: '20%' }, toolbox: { feature: { dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, // 类型数据 legend: { data: type }, // x轴横向坐标的数据 xAxis: [{ type: 'category', axisTick: { alignWithLabel: true }, data: month// 自定义月份数据 }], // y轴纵向坐标的数据 yAxis: [{ type: 'value', name: '蒸发量', min: 0, max: 250, position: 'right', axisLine: { lineStyle: { color: colors[0] } }, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '降水量', min: 0, max: 250, position: 'right', offset: 80, axisLine: { lineStyle: { color: colors[1] } }, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '温度', min: 0, max: 25, position: 'left', axisLine: { lineStyle: { color: colors[2] } }, axisLabel: { formatter: '{value} °C' } } ], // y轴纵向坐标数据具体图表样式 series: [{ name: type[0],// 蒸发量名称 type: 'bar',// 柱状图 data: data1// 数据 }, { name: type[1],// 降水量名称 type: 'bar',// 柱状图 yAxisIndex: 1, data: data2// 数据 }, { name: type[2],// 平均温度名称 type: 'line',// 折线图 yAxisIndex: 2, data: data3// 数据 } ] };; if(option && typeof option === "object") { myChart.setOption(option, true); } </script>
	</body>

</html>

某市降雨量柱状图

饼状图

接下来实现我们的饼状图报表，点击导航栏实例

选择饼图 -> Nested Pies

将DEMO下载至本地，并且导入到工具，然后完成自己的案例。

注意：将资源文件全部下载下来，没有网络的情况下也可以继续使用。

完整代码

<!DOCTYPE html>
<html style="height: 100%">

	<head>
		<meta charset="utf-8">
	</head>

	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>
		<!-- 将原来的js通过网页下载下来在本地使用 -->
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/echarts-gl.min.js"></script>
		<script type="text/javascript" src="js/ecStat.min.js"></script>
		<script type="text/javascript" src="js/dataTool.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/world.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<script type="text/javascript" src="js/bmap.min.js"></script>
		<script type="text/javascript" src="js/simplex.js"></script>
		<script type="text/javascript"> // 准备数据(可以自定义) // 类型数据 var type = ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']; // 内圈数据 var innerData = [{ value: 335, // 数据 name: '直达', // 名称 selected: true // 是否选中 }, { value: 679, // 数据 name: '营销广告' // 名称 }, { value: 1548, // 数据 name: '搜索引擎' // 名称 } ]; // 外圈数据 var outerData = [{ value: 335, // 数据 name: '直达' // 名称 }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1048, name: '百度' }, { value: 251, name: '谷歌' }, { value: 147, name: '必应' }, { value: 102, name: '其他' } ]; var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; app.title = '嵌套环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, // 类型数据 legend: { orient: 'vertical', x: 'left', data: type }, // 数据具体图表样式 series: [{ // 内圈饼图 name: '访问来源', // 名称 type: 'pie', // 饼图 selectedMode: 'single', radius: [0, '30%'], label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, // 内圈数据饼分布大小 data: innerData }, { // 外圈饼图 name: '访问来源', // 名称 type: 'pie', // 饼图 radius: ['40%', '55%'], label: { normal: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, // shadowBlur:3, // shadowOffsetX: 2, // shadowOffsetY: 2, // shadowColor: '#999', // padding: [0, 7], rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, // abg: { // backgroundColor: '#333', // width: '100%', // align: 'right', // height: 22, // borderRadius: [4, 4, 0, 0] // }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 }, b: { fontSize: 16, lineHeight: 33 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } } }, // 外圈数据饼分布大小 data: outerData } ] };; if(option && typeof option === "object") { myChart.setOption(option, true); } </script>
	</body>

</html>

数据访问来源饼状图

高德地图API开发地图和地铁图

高德开放平台提供2D，3D，卫星多种地图形式供开发者选择，无论基于哪种平台，都可以通过高德开放平台提供的API和SDK轻松的完成地图的构建工作。同时我们还提供强大的地图再开发能力，全面的地图数据支持，离线在线两种使用方式，多种地图交互模式，满足各个场景下对地图的需求。

开发支持

进入官网，点击导航栏开发支持 -> 地图 JS API

注册账号并申请Key

如果只是简单的DEMO演示，可以不需要注册账号申请Key，但是我们学习的案例是需要实现搜索功能的，所以大家需要注册账号并申请Key。

在学习第一个DEMO时，可以先不用创建，敲完代码以后，实现最终案例地图搜索时再去注册账号申请Key。
老师的Key：39aa9b767ba49dd9326062ed9351a72c

DEMO实现

在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

<!-- 第一步 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值"></script>

添加div标签作为地图容器，同时为该div指定id属性；

<!-- 第二步 添加div标签作为地图容器，同时为该div指定id属性； -->
<div id="container"></div>

为地图容器指定高度、宽度；

<!-- 第三步 为地图容器指定高度、宽度 -->
<style type="text/css"> * { margin: 0; padding: 0; } html, body, #container { width: 100%; height: 100%; } </style>

进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

<!-- 第四步 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

在完成如上准备工作之后便可以开始进行开发工作了，然后异步加载 JS API。

<!-- 第五步 异步加载 JS API -->
<script type="text/javascript"> window.onLoad = function() { var map = new AMap.Map('container'); } var url = 'https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&callback=onLoad'; var jsapi = document.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi); </script>

最终页面如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 第四步 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能 -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<title>地图</title>
		<!-- 第三步 为地图容器指定高度、宽度 -->
		<style type="text/css"> * { margin: 0; padding: 0; } html, body, #container { width: 100%; height: 100%; } </style>
	</head>

	<body>
		<!-- 第二步 添加div标签作为地图容器，同时为该div指定id属性； -->
		<div id="container"></div>
		<!-- 第一步 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key -->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值"></script>
		<!-- 第五步 异步加载 JS API -->
		<script type="text/javascript"> window.onLoad = function() { var map = new AMap.Map('container'); } var url = 'https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&callback=onLoad'; var jsapi = document.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi); </script>
	</body>

</html>

演示效果：

完成案例

地图搜索

将源代码编辑器内的代码复制粘贴至项目，修改Key为自己的注册申请的Key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&plugin=AMap.Autocomplete"></script>

完整代码

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>地图搜索</title>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<style> html, body, #container { width: 100%; height: 100%; } </style>
	</head>

	<body>
		<div id="container"></div>
		<div class="info">
			<div class="input-item">
				<div class="input-item-prepend">
					<span class="input-item-text" style="width:8rem;">请输入关键字</span>
				</div>
				<input id='tipinput' type="text">
			</div>
		</div>

		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
		<script type="text/javascript"> //地图加载 var map = new AMap.Map("container", { resizeEnable: true }); //输入提示 var autoOptions = { input: "tipinput" }; var auto = new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ map: map }); //构造地点查询类 AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发 function select(e) { placeSearch.setCity(e.poi.adcode); placeSearch.search(e.poi.name); //关键字查询查询 } </script>
	</body>

</html>

演示效果：

地铁图

进入官网，点击导航栏开发支持 -> 地铁图 JS API

点击官网左侧创建地铁图，按网站提示一步步完成案例

引入地铁图 JS API文件

<!-- 第一步 引入地铁图 JS API文件 -->
<script type="text/javascript" src="https://webapi.amap.com/subway?v=1.0&key=您申请的key值&callback=cbk"></script>

html文档中的meta声明

<!-- 第二步 html文档中的meta声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />

创建地图容器，在页面body里想展示地图的地方创建一个div 容器，并指定id标识:

<!-- 第三步 创建地图容器 -->
<div id="mysubway"></div>

自定义模式创建地铁图

<!-- 第四步 自定义模式创建地铁图 -->
<script type="text/javascript"> window.cbk = function() { var mysubway = subway("mysubway", { adcode: 3100 //上海的adcode }); }; </script>

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 第二步 html文档中的meta声明 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />
		<title>地铁图</title>
	</head>

	<body>
		<!-- 第三步 创建地图容器 -->
		<div id="mysubway"></div>
		<!-- 第一步 引入地铁图 JS API文件 -->
		<script type="text/javascript" src="https://webapi.amap.com/subway?v=1.0&key=您申请的key值&callback=cbk"></script>
		<!-- 第四步 自定义模式创建地铁图 -->
		<script type="text/javascript"> window.cbk = function() { var mysubway = subway("mysubway", { adcode: 3100 //上海的adcode }); }; </script>
	</body>

</html>

演示效果：

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/Junsunnyl/article/details/122381833

内容来源于网络，如有侵权，请联系作者删除！

JavaScript前端css3java前端技术

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com