vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案

2024-09-05 02:20
文章标签 javascript 可视化 vue frontend 方案 笔记本 适配 4k 1080 大屏 2k 1920 带鱼

本文主要是介绍vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 本方案采用的是媒体查询的方法来实现的

css媒体查询书写（可按照自己需求新增）不同尺寸下显示不同的文字大小图片大小等：

// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {}
// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {}
// 2K
@media screen and (max-width: 2560px) {}
// 全高清屏幕
@media screen and (max-width: 1920px) {}
// 14寸笔记本
@media screen and (max-width: 1366px) {}

 页面ecahrts字体大小和样式采用计算属性计算：

// 计算样式
const computedSize = computed(() => {let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;let objFun = {};// 14寸笔记本if (clientWidth <= 1366) {console.log("14寸笔记本")objFun.fontSize = 12; //文字大小objFun.symbolSize = 3; //节点大小objFun.borderWidth = 1; //线条宽度objFun.itemWidth = 12; //legend方块宽度objFun.itemHeight = 5; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};} // 全高清屏幕else if (clientWidth <= 1920) {console.log("全高清屏幕")objFun.fontSize = 15; //文字大小objFun.symbolSize = 5; //节点大小objFun.borderWidth = 2; //线条宽度objFun.itemWidth = 20; //legend方块宽度objFun.itemHeight = 8; //legend方块高度objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};}// 2Kelse if (clientWidth <= 2560) {console.log("2K")objFun.fontSize = 18; //文字大小objFun.symbolSize = 10; //节点大小objFun.borderWidth = 3; //线条宽度objFun.itemWidth = 25; //legend方块宽度objFun.itemHeight = 10; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "20%",left: "2%",right: "2%",};}// 4K 带鱼屏else if (clientWidth <= 3840 && clientHeight <= 1080) {console.log("4K 带鱼屏")objFun.fontSize = 20; //文字大小objFun.symbolSize = 15; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 24; //legend方块宽度objFun.itemHeight = 15; //legend方块高度objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "28%",left: "2%",right: "2%",};}// 4Kelse if (clientWidth <= 3840 && clientHeight >= 1080) {console.log("4K尺寸")objFun.fontSize = 30; //文字大小objFun.symbolSize = 20; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 40; //legend方块宽度objFun.itemHeight = 20; //legend方块高度objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "18%",left: "2%",right: "2%",};} return objFun;
});

初始化echarts的时候直接使用：

// 初始化echarts
function initChart(myData8, tss, dcl) {const chartDom = document.getElementById('echarts2');chart = proxy.$echarts.init(chartDom);// let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];let option = {// backgroundColor: "#041D3F",tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(0, 255, 233,0)",},{offset: 0.5,color: "rgba(255, 255, 255,1)",},{offset: 1,color: "rgba(0, 255, 233,0)",},],global: false,},},},textStyle: {color: "#fff",fontSize: computedSize.value.fontSize, // 设置字体大小},confine: true, // 限制溢出屏幕外backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色padding: [10, 10, 10, 10], // 设置方框的内边距},grid: computedSize.value.grid,legend: {show: true,right: 0,top: 0,itemWidth: computedSize.value.itemWidth,itemHeight: computedSize.value.itemHeight,icon: 'rect',// itemGap: 20, // 调整图例项之间的水平间距textStyle: {color: '#fff',fontSize: computedSize.value.fontSize,// 设置上下居中对齐align: 'center',// verticalAlign: 'middle',// color: "#B6DCF5",// padding: [0, 0, 0, 4],},},xAxis: {data: myData8,axisLabel: {interval: 0,show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: true,lineStyle: {show: true,color: "rgba(54, 153, 255, .4)",},},axisTick: {show: false,},},yAxis: [{name: "单位：KJ",type: "value",nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: [0, 0, 0, 0],},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}, {name: "单位：吨",// offset: -25,type: "value",nameLocation: "end",nameGap: 10, // 控制名称和轴之间的距离nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: computedSize.value.padding,},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}],series: [{name: "能耗",type: "line",showSymbol: true,symbolSize: computedSize.value.symbolSize, //方块大小symbol: "circle",lineStyle: {normal: {color: "#FF8E3C",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#FF8E3C",// borderColor: "#fff",borderWidth: 2,},data: tss, // 折线图的数据},{name: "吞吐量",type: "line",showSymbol: true,symbol: "circle",symbolSize: computedSize.value.symbolSize,lineStyle: {normal: {color: "#00A0E9",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#00A0E9",// borderColor: "#fff",borderWidth: 2,},data: dcl, // 折线图的数据},// {//     name: "已处理",//     type: "line",//     showSymbol: true,//     symbolSize: 8,//     symbol: "circle",//     lineStyle: {//         normal: {//             color: "#02D6B0",//         },//     },//     itemStyle: {//         color: "#02D6B0",//         borderColor: "#fff",//         borderWidth: 2,//     },//     data: ycl, // 折线图的数据// },],};// 使用刚指定的配置项和数据显示图表。chart.setOption(option);window.addEventListener('resize', function () {chart.resize();});}

另外可以加上 监听到页面尺寸变化后刷新页面：

onMounted(() => {window.addEventListener("resize", () => {window.location.reload();});
})

vue+echarts其中一个组件完整写法：

// 装卸能耗分析
<template><div class="all"><div class="all_title"><span class="all_title_txt">装卸能耗分析</span><img class="dateBg" src="../../assets/images/dateBg.png" alt="" oncontextmenu="return false"draggable="false"></div><div class="all_bod" id="echarts2"></div></div>
</template><script setup name="box8">
const { proxy } = getCurrentInstance();
import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
// let currentIndex = ref(0)
let chart = ref(null);
let timer = ref(null);const props = defineProps({allData: {type: Object,required: true}
});// 监听 allData 的变化
watch(() => props.allData, (newVal) => {console.log("echarts8接收到值", newVal)let myData8 = [];let tss = [];let dcl = [];// let myData8 = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];// let tss = [60, 80, 20, 40, 60, 40, 50, 50, 60, 32, 52, 55, 60];// let dcl = [40, 55, 50, 60, 30, 20, 60, 30, 20, 10, 30, 20];newVal.forEach(item => {myData8.push(item.time)tss.push(item.energyConsumption)dcl.push(item.thruput)})setTimeout(() => {initChart(myData8, tss, dcl)}, 500)});// window.addEventListener('resize', function () {
//     // const innerWidth = window.innerWidth
//     // const innerHeight = window.innerHeight
//     // console.log("resize", computedSize.value.fontSize)
//     chart.resize();
// });onUnmounted(() => {if (timer.value) clearInterval(timer.value);
})// 计算样式
const computedSize = computed(() => {let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;let objFun = {};// 14寸笔记本if (clientWidth <= 1366) {console.log("14寸笔记本")objFun.fontSize = 12; //文字大小objFun.symbolSize = 3; //节点大小objFun.borderWidth = 1; //线条宽度objFun.itemWidth = 12; //legend方块宽度objFun.itemHeight = 5; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};} // 全高清屏幕else if (clientWidth <= 1920) {console.log("全高清屏幕")objFun.fontSize = 15; //文字大小objFun.symbolSize = 5; //节点大小objFun.borderWidth = 2; //线条宽度objFun.itemWidth = 20; //legend方块宽度objFun.itemHeight = 8; //legend方块高度objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};}// 2Kelse if (clientWidth <= 2560) {console.log("2K")objFun.fontSize = 18; //文字大小objFun.symbolSize = 10; //节点大小objFun.borderWidth = 3; //线条宽度objFun.itemWidth = 25; //legend方块宽度objFun.itemHeight = 10; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "20%",left: "2%",right: "2%",};}// 4K 带鱼屏else if (clientWidth <= 3840 && clientHeight <= 1080) {console.log("4K 带鱼屏")objFun.fontSize = 20; //文字大小objFun.symbolSize = 15; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 24; //legend方块宽度objFun.itemHeight = 15; //legend方块高度objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "28%",left: "2%",right: "2%",};}// 4Kelse if (clientWidth <= 3840 && clientHeight >= 1080) {console.log("4K尺寸")objFun.fontSize = 30; //文字大小objFun.symbolSize = 20; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 40; //legend方块宽度objFun.itemHeight = 20; //legend方块高度objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "18%",left: "2%",right: "2%",};}return objFun;
});// 初始化echarts
function initChart(myData8, tss, dcl) {const chartDom = document.getElementById('echarts2');let chart = proxy.$echarts.init(chartDom);// let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];let option = {// backgroundColor: "#041D3F",tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(0, 255, 233,0)",},{offset: 0.5,color: "rgba(255, 255, 255,1)",},{offset: 1,color: "rgba(0, 255, 233,0)",},],global: false,},},},textStyle: {color: "#fff",fontSize: computedSize.value.fontSize, // 设置字体大小},confine: true, // 限制溢出屏幕外backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色padding: [10, 10, 10, 10], // 设置方框的内边距},grid: computedSize.value.grid,legend: {show: true,right: 0,top: 0,itemWidth: computedSize.value.itemWidth,itemHeight: computedSize.value.itemHeight,icon: 'rect',// itemGap: 20, // 调整图例项之间的水平间距textStyle: {color: '#fff',fontSize: computedSize.value.fontSize,// 设置上下居中对齐align: 'center',// verticalAlign: 'middle',// color: "#B6DCF5",// padding: [0, 0, 0, 4],},},xAxis: {data: myData8,axisLabel: {interval: 0,show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: true,lineStyle: {show: true,color: "rgba(54, 153, 255, .4)",},},axisTick: {show: false,},},yAxis: [{name: "单位：KJ",type: "value",nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: [0, 0, 0, 0],},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}, {name: "单位：吨",// offset: -25,type: "value",nameLocation: "end",nameGap: 10, // 控制名称和轴之间的距离nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: computedSize.value.padding,},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}],series: [{name: "能耗",type: "line",showSymbol: true,symbolSize: computedSize.value.symbolSize, //方块大小symbol: "circle",lineStyle: {normal: {color: "#FF8E3C",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#FF8E3C",// borderColor: "#fff",borderWidth: 2,},data: tss, // 折线图的数据},{name: "吞吐量",type: "line",showSymbol: true,symbol: "circle",symbolSize: computedSize.value.symbolSize,lineStyle: {normal: {color: "#00A0E9",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#00A0E9",// borderColor: "#fff",borderWidth: 2,},data: dcl, // 折线图的数据},// {//     name: "已处理",//     type: "line",//     showSymbol: true,//     symbolSize: 8,//     symbol: "circle",//     lineStyle: {//         normal: {//             color: "#02D6B0",//         },//     },//     itemStyle: {//         color: "#02D6B0",//         borderColor: "#fff",//         borderWidth: 2,//     },//     data: ycl, // 折线图的数据// },],};// 使用刚指定的配置项和数据显示图表。chart.setOption(option);let index = 0; // 初始化索引 // 使用定时器定时更新 tooltip 数据if (timer.value) clearInterval(timer.value);timer.value = setInterval(() => {chart.dispatchAction({type: "showTip", // 触发 tooltip 显示seriesIndex: 0, // 触发 tooltip 的系列索引dataIndex: index, // 触发 tooltip 的数据索引});index = (index + 1) % myData8.length; // 更新索引，循环显示数据}, 2000); // 每隔 2 秒更新一次 // 鼠标移入暂停轮播chart.on("mouseover", () => {clearInterval(timer.value);timer.value = null;});// 鼠标移出继续轮播chart.on("globalout", () => {if (timer.value) { clearInterval(timer.value); }timer.value = setInterval(() => {chart.dispatchAction({type: "showTip", // 触发 tooltip 显示seriesIndex: 0, // 触发 tooltip 的系列索引dataIndex: index, // 触发 tooltip 的数据索引});index = (index + 1) % myData8.length; // 更新索引，循环显示数据}, 2000); // 每隔 2 秒更新一次});window.addEventListener('resize', function () {chart.resize();});}</script><style lang="scss" scoped>
* {margin: 0;padding: 0;box-sizing: border-box;
}img {-webkit-user-drag: none;user-drag: none;user-select: none;-ms-user-select: none;
}.all {display: flex;flex-flow: column;justify-content: space-between;width: 100%;height: 100%;// border: 1px solid red;// background-color: pink;.all_title {display: flex;align-items: center;justify-content: space-between;// padding: 0 40px;padding-right: 20px;width: 100%;// height: 44px;color: #A5D8FC;font-size: 16px;background: url("../../assets/images/smallTitBg.png") no-repeat;background-size: 100% 100%;// span {//     transform: translateY(-8px);// }.dateBg {// width: 25px;// height: 25px;cursor: pointer;&:hover {opacity: .8;}}}.all_bod {display: flex;flex-flow: column;width: 100%;// height: calc(100% - 44px);}}// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {.all_title_txt {font-size: 35px;transform: translate(80px, -20px);}.today_tit {font-size: 30px;}.all_title {height: 80px;}.all_bod {height: calc(100% - 80px) !important;}.dateBg {width: 45px;height: 45px;transform: translateY(-10px);}
}// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {.all_title_txt {font-size: 50px;transform: translate(80px, -20px);}.today_tit {font-size: 50px;}.all_title {height: 100px;}.all_bod {height: calc(100% - 100px) !important;}.dateBg {width: 55px;height: 55px;transform: translateY(-15px);}
}// 2K
@media screen and (max-width: 2560px) {.all_title_txt {font-size: 35px;transform: translate(70px, -20px);}.today_tit {font-size: 32px;}.all_title {height: 100px;}.all_bod {height: calc(100% - 100px) !important;}.dateBg {width: 40px;height: 40px;transform: translateY(-15px);}
}// 全高清屏幕
@media screen and (max-width: 1920px) {.all_title_txt {font-size: 16px;transform: translate(30px, -10px);}.today_tit {font-size: 16px;}.all_title {height: 50px;}.all_bod {height: calc(100% - 50px) !important;}.dateBg {width: 25px;height: 25px;transform: translateY(-5px);}
}// 14寸笔记本
@media screen and (max-width: 1366px) {.all_title_txt {font-size: 14px;transform: translate(30px, -10px);}.today_tit {font-size: 16px;}.all_title {height: 50px;}.all_bod {height: calc(100% - 50px) !important;}.dateBg {width: 20px;height: 20px;transform: translateY(-5px);}
}
</style>

这篇关于vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1137693。

相关文章

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri
阅读更多...
SQLite3 在嵌入式C环境中存储音频/视频文件的最优方案

SQLite3 在嵌入式C环境中存储音频/视频文件的最优方案

《SQLite3在嵌入式C环境中存储音频/视频文件的最优方案》本文探讨了SQLite3在嵌入式C环境中存储音视频文件的优化方案,推荐采用文件路径存储结合元数据管理,兼顾效率与资源限制,小文件可使用B... 目录SQLite3 在嵌入式C环境中存储音频/视频文件的专业方案一、存储策略选择1. 直接存储 vs
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2