移动互联应用学习心得

正题：

CSS动画原理及2D变换：

1. 动画原理主要分为平移、旋转、缩放、倾斜。后续的动画效果基本是从这几个原始操作衍生的。主要属性是transform.

平移：

<style>.box {width: 100px;height: 100px;background-color: #f00;/* transform: 变换，用于描述物体的位置旋转缩放translate: 平移 第一个参数 水平平移量 右为正方向第二个参数 竖直平移量 下为正方向*/transform: translate(-50px, -50px);transform: translateX(300px);transform: translateY(200px);transform: translateZ(50px);}</style>

旋转：

 <style>.box {width: 100px;height: 100px;background-color: #f00;position: relative;top: 200px;left: 200px;/* rotate 旋转 *//* 参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180° *//* 沿轴进行顺时针旋转为正方向，0°代表竖直向上 */transform: rotate(30deg);/* 负数的含义其实就是 360 - 对应度数 *//* 默认旋转函数rotate 是沿着z轴进行旋转 */transform: rotate(-30deg);/* transform: rotateX(0deg); */transform: rotateY(0deg);}</style>

缩放：

 <style>.box {width: 100px;height: 100px;background-color: #f00;position: relative;top: 200px;left: 200px;/* scale 缩放参数：比率 1 为原本大小*/transform: scale(1);transform: scaleX(0.5);transform: scaleY(2);transform: scale(2, 0.5);}img {/* scale 写负数代表反向 */transform: scale(-1);transform: scaleX(-1);}</style>
</head><body><div class="box"></div><img src="./img/icon.png" alt="" srcset="">
</body>

倾斜：

 <style>.box {width: 100px;height: 100px;background-color: #f00;position: relative;top: 200px;left: 200px;/* skew 倾斜 */transform: skew(30deg);transform: skew(0deg, 30deg);transform: skewX(30deg);transform: skewY(30deg);}</style>
</head><body><div class="box"></div>
</body></html>

综合例子（度数可自己调试）：

<style>.container {width: 400px;height: 400px;border: 1px solid #000;position: relative;}.leaf {width: 0;height: 0;border-style: solid;border-width: 100px 50px;border-color: transparent transparent #f00 #f00;position: absolute;left: 200px;top: 0;transform-origin: left bottom;transform: rotate(0deg);}.leaf:nth-child(2n) {border-color: transparent transparent #00f #00f;}</style>
</head><body><div class="container"><div class="leaf"></div><div class="leaf" style="transform: rotate(90deg);"></div><div class="leaf" style="transform: rotate(180deg);"></div><div class="leaf" style="transform: rotate(270deg);"></div></div>
</body>

2.过度动画（下落盒子）：

<style>body {height: 100vh;margin: 0;display: flex;}.box {width: 50px;height: 50px;background-color: pink;transition: all 2s linear;/* 初始状态 */transform: translateY(0px);margin-right: 8px;/* 设置flex的子元素不要进行压缩 */flex-shrink: 0;}</style>
</head><body><!-- html 模板 --><!-- <div class="box"></div> -->
</body><script>// let box = document.querySelector('.box')let html = ''for (let i = 0; i < 100; i++) {html += `<div class="box" style="transition-delay: ${i * 0.5}s"></div>`}document.body.innerHTML = html// 查询元素let boxs = document.querySelectorAll('.box')document.body.addEventListener('click', () => {// 赋值第二个状态// box.style.transform = 'translateY(100px)'for (let i = 0; i < boxs.length; i++) {const box = boxs[i];box.style.transform = `translateY(100px)`}})
</script>

jQuery:

1.jQuery基础用法：

<script>// jquery 使用的方法：// 1. 查询并存储元素// 2. 操作元素，包括修改元素样式，绑定事件等console.log($);// 使用 $() 函数获取一个 jQuery 对象// jquery 对象的变量名 一般以 $ 美元符开头let $box = $('.box')// jquery 对象看上去像一个数组 其中数组成员就是 dom 对象console.log($box);// 给元素添加样式// $box.css('height', '100px')// $box.css('background-color', '#f00')// jquery对象的函数总返回自己// 所以可以进行链式调用$box.css('height', '100px').css('background-color', '#f00').css('color', '#fff').text('hello world')</script>

2.创建jQuery对象：

<script>// 什么是jquery 对象// 使用jquery $() 函数查询出来的返回值 就是一个jquery 对象// $box 就是一个jquery 对象// let $box = $('.box')// 获取jquery对象的方法有两种// 1. 使用 css 选择器let $li = $('ul>li')// 2. 使用 dom 对象// 先查询一个dom对象let box = document.querySelector('.box')// 使用dom对象获取一个jquery对象let $box = $(box)
</script>

3.设置样式：

<style>.box {width: 100px;height: 100px;font-size: 64px;}.box1 {color: #ff0;background-color: #f00;}.box2 {color: #0f0;background-color: #00f;}</style>
</head><body><div class="box box1">1</div><div class="box box2">2</div>
</body><script src="./js/jquery.min.js"></script>
<script>let $box = $('.box')// 读取样式let width = $box.css('width')console.log(width);// 读取多个样式let r = $box.css(['width', 'color', 'font-size'])console.log(r);// 赋值样式// $box.css('background-color', '#f00')// 通过函数来赋值样式$box.css('background-color', (index, value) => {// index 遍历的数组成员的索引// value 对应索引元素的样式值console.log(index, value);// 返回一个参数就可以赋值css属性if (index === 0) {return 'pink'} else {return 'gold'}})
</script>

4.设置类

 <style>.box {width: 100px;height: 100px;background-color: #000;}.box.active {background-color: #ff0;}</style>
</head><body><div class="box"></div>
</body>
<script src="./js/jquery.min.js"></script>
<script>let $box = $('.box')// 添加类$box.addClass('active')// 判断是否存在某个类名$box.hasClass('active')// 删除类$box.removeClass('active')
</script>

5.绑定事件：

<script>let $btn = $('button')// 和dom对象绑定事件进行类比// dom 对象有两种绑定事件的方法// 1. 使用 事件属性 例如: onclick onmousemove// 对应 jquery 的写法如下$btn.click(ev => {console.log('click');// ev 是jquery封装的事件对象console.log(ev);})// 再例如$btn.mousemove(ev => {console.log('mousemove');})// 可以直接使用事件对应的函数去触发事件，例如:$btn.click()$btn.mousemove()// 2. 使用事件监听器// $btn[0].addEventListener('click', ev=>{})// 对应的jquery写法：const handler = ev => {console.log(ev);console.log(1);}// 绑定事件$btn.on('click', handler)$btn.on('click', ev => {console.log(ev);console.log(2);})// 绑定一次性事件$btn.one('click', ev => {console.log(ev);console.log('one');})// 解绑指定事件处理程序// $btn.off('click', handler)// 解绑所有事件处理程序$btn.off('click')</script>

canvas画布：

1.canvas基础用法：

 <style>canvas {border: 3px solid #000;/* 样式的宽高也可以设置canvas标签的大小，但不是真实的像素值而是拉伸后的大小 */width: 800px;height: 600px;}</style>
</head><body><!-- width height 属性可以设置画布的像素大小例如: width="800" 就意味着画布水平有800个真实像素--><canvas width="400" height="300"></canvas>
</body><script>const canvas = document.querySelector('canvas')// 获取canvas标签的画布对象// 可以通过操作画布对象来进行绘画const ctx = canvas.getContext('2d')// 绘制一个实心矩形ctx.fillRect(100, 50, 100, 100)// 总结:// 使用canvas的步骤// 1. 创建canvas标签// 2. 给canvas标签设置 width height 属性// 3. 通过js 获取canvas标签// 4. 通过canvas标签获取context画布上下文（画布对象）// 5. 通过context绘制画布
</script>

2.绘制矩形：

<script>const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')// 改颜色ctx.fillStyle = '#f00'// 绘制实心矩形(rectangle)// ctx.fillRect(x, y, w, h)// x: 水平坐标// y: 竖直坐标// 坐标原点在canvas左上角// w: 宽度// h: 高度ctx.fillRect(50, 100, 150, 50)// 镂空矩形// 参数和实心矩形相同ctx.strokeRect(300, 100, 200, 100)// 清空矩形, 用于清空画布ctx.clearRect(0, 0, 800, 600)
</script>

3.绘制文本：

<script>const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')// 修改字体大小和字体库ctx.font = '32px 华文琥珀'ctx.fillStyle = '#f00'// 绘制实心文字// 语法：ctx.fillText(text, x, y, max-width)// text: 要渲染的文本// x,y: 文本渲染的坐标位置// max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度// ctx.fillText('祖国万岁!!', 200, 100, 100)ctx.fillText('祖国万岁!!', 200, 100)ctx.strokeStyle = '#0f0'// 镂空文字// 参数和实心文本相同ctx.strokeText('祖国万岁!!', 200, 300)</script>

4.画线：

<script>const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')// 设置颜色和线宽ctx.strokeStyle = '#ff0'ctx.lineWidth = 15// 画线分两个步骤:// 1. 描点（设置路径）// 2. 画线（将所描的点连接起来）// 步骤一// 使用 beginPath 开启路径ctx.beginPath()// 移动笔头但不会记录路径上的线条ctx.moveTo(400, 100)// 用线绘制到下一个点ctx.lineTo(200, 200)ctx.lineTo(600, 200)ctx.lineTo(400, 100)// 将路径封闭ctx.closePath()// 注意：beginPath在画新的路径的时候必须调用，closePath选择性调用// 步骤二// 为了显示图形需要调用以下函数// 将路径所包围的图形用纯色来填充// ctx.fill()// 将路径用镂空线条进行绘制ctx.stroke()ctx.strokeStyle = '#f00'ctx.beginPath()ctx.moveTo(400, 400)ctx.lineTo(500, 400)// 角度转弧度的公式: rad = (PI / 180) * deg// 弧线// ctx.arc(x, y, r, start, end)// x: 圆心横坐标// y: 圆心纵坐标// r: 圆半径// start: 起始弧度 0度时的方向为水平向右 顺时针为正方向// end: 结束弧度ctx.arc(400, 400, 100, 0, Math.PI / 180 * 30)ctx.closePath()ctx.fill()// ctx.stroke()
</script>

5.绘制图片：

<script>// mdn: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage// 语法:// ctx.drawImage(image, dx, dy);// ctx.drawImage(image, dx, dy, dWidth, dHeight);// ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);// image: img 标签的 dom 对象// dx dy: 图片在canvas中的坐标// dWidth dHeight: 图片在canvas中的宽高// sx, sy: 参考图片源，截图的坐标// sWidth, sHeight: 截图的宽高// const img = document.querySelector('img')const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')// img.addEventListener('load', () => {//     // 图片加载完成后 再绘制图片//     // ctx.drawImage(img, 100, 100)//     // ctx.drawImage(img, 100, 100, 100, 100)//     ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);// })// 动态生成图片进行绘图let img = document.createElement('img')img.style.display = 'none'img.src = './img/heihei.png'img.addEventListener('load', ev => {// 绘图ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);// 删除图片节点img.remove()})// 插入图片到页面document.body.appendChild(img)
</script>

多媒体标签：

1.使用方法：

<body><!-- 查看媒体标签的方法： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement --><!-- 参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video --><!-- 属性width 标签宽度height 标签高度controls 控制面板muted 静音autoplay 自动播放src 媒体源preload 预载模式loop 循环poster 海报--><!-- <video height="300" src="./video/oceans.mp4" controls muted loop poster="./img/desktop.png"></video> --><!-- 使用自动播放+静音，能实现自动播放的效果 --><!-- <video height="300" src="./video/oceans.mp4" controls autoplay muted></video> --><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio --><!-- 音频播放器 --><!-- 由于audio和video都属于HTMLMediaElement的实例所以audio的所有使用方法和video一样可以通过 instanceof 来判断一个对象是否是某个类型的实例video instanceof HTMLMediaElement--><!-- <audio src="./audio/moon.mp3" controls loop></audio> --><!-- source 标签若有多个，那么浏览器会从上至下加载直到某一个被加载成功为止 --><audio controls><!-- 数据源标签 --><source src="./audio/a44.mp3"><source src="./audio/b44.mp3"><source src="./audio/c4.mp3"></audio><video height="300" src="./video/oceans.mp4"></video><!-- 自定义控制器 --><div><button class="play">播放</button><button class="pause">暂停</button>当前时间：<span class="current-time"></span>总时间：<span class="total-time"></span><input class="inp" /><button class="go-to">跳转到此时间</button><button class="v-up">音量+</button><button class="v-down">音量-</button><button class="muted">静音</button></div><!-- 可以通过以下网站自定义滑块样式http://danielstern.ca/range.css/?ref=css-tricks#/--><input type="range" min="0" max="100" step="20" value="0"><span class="range-value">0</span><br /><!-- picture --><picture><!-- source 标签中有多个待选项时，使用srcset规定资源路径 --><!-- media 设置媒体查询 --><!-- 媒体查询的顺序由大到小 --><source srcset="./img/1.png" media="(min-width: 800px)"><source srcset="./img/2.png" media="(min-width: 600px)"><img width="500" src="./img/desktop.png"></picture>
</body><script>let inputRange = document.querySelector('input[type=range]')let rangeValue = document.querySelector('.range-value')inputRange.addEventListener('input', () => {rangeValue.textContent = inputRange.value})// 可以使用 Audio 类名来创建 audio 标签// let audio = new Audio()// audio.src = './audio/a4.mp3'// audio.play()let video = document.querySelector('video')let playBtn = document.querySelector('.play')let pauseBtn = document.querySelector('.pause')let totalTime = document.querySelector('.total-time')let currentTime = document.querySelector('.current-time')let inp = document.querySelector('.inp')let goToBtn = document.querySelector('.go-to')let vUpBtn = document.querySelector('.v-up')let vDownBtn = document.querySelector('.v-down')let mutedBtn = document.querySelector('.muted')let timer// 播放playBtn.addEventListener('click', () => {video.play()// 显示总时长// textContent 标签体的文本内容// duration 代表媒体时长，单位: 秒totalTime.textContent = video.durationcurrentTime.textContent = video.currentTimeclearInterval(timer)timer = setInterval(() => {// currentTime 代表当前播放的时间currentTime.textContent = video.currentTime}, 1000)})// 暂停pauseBtn.addEventListener('click', () => {video.pause()})// 跳转进度goToBtn.addEventListener('click', () => {let currentTime = Number(inp.value)// 直接赋值 video 的 currentTime 就可以跳转进度video.currentTime = currentTime})// 音量+vUpBtn.addEventListener('click', () => {// volume 是一个 0~1 的数字 用于控制音量video.volume = video.volume + 0.1 > 1 ? 1 : video.volume + 0.1})// 音量-vDownBtn.addEventListener('click', () => {// volume 是一个 0~1 的数字 用于控制音量video.volume = video.volume - 0.1 < 0 ? 0 : video.volume - 0.1})// 静音mutedBtn.addEventListener('click', () => {video.muted = !video.muted})</script>

2.animate属性：

 <style>h1 {/* 自定义动画样式 *//* animation-delay: 10s !important; */animation-timing-function: cubic-bezier(0, 1.34, 1, -0.4) !important;animation-duration: 10s !important;}</style>
</head><body><!-- 动画必须添加 animate__animated其次添加动画名称所代表的类名--><!-- <h1 class="animate__animated animate__bounceInDown">hello world</h1> --><!-- 辅助类 --><!-- 延迟 --><!-- <h1 class="animate__animated animate__bounceInDown animate__delay-2s">hello world</h1> --><!-- 播放速度animate__slow 2sanimate__slower   3sanimate__fast 800msanimate__faster    500ms--><!-- <h1 class="animate__animated animate__bounceInDown animate__slower">hello world</h1> --><!-- 动画播放次数animate__repeat-1    1animate__repeat-2  2animate__repeat-3  3animate__infinite  infinite--><!-- <h1 class="animate__animated animate__bounceInDown animate__infinite">hello world</h1> --><!-- 动态添加动画 --><!-- <h1>hello world</h1><button class="play">播放</button> --><!-- 动画的叠加 只需要添加多级元素来播放不同的动画即可--><!-- <div class="animate__animated animate__fadeInUpBig"><h1 class="animate__animated animate__bounceInRight">hello world</h1></div> --><!-- 自定义动画由于animate.css本质上是使用的 animation 样式播放的动画，所以可以手动强制修改 animation相关样式，来实现自定义--><h1 class="animate__animated animate__bounce">hello world</h1>
</body><script>// 知识点：// 什么是animate.css?// 如何安装// 如何静态播放动画// 动画辅助类//      延迟 animation-delay//      播放速度 animation-duration//      重复次数// 如何动态播放动画// 如何叠加多组动画// 自定义动画// 官网：https://animate.style/// 什么是animate.css?// animate.css 是一个 css 的动画库const h1 = document.querySelector('h1')const playBtn = document.querySelector('.play')playBtn.addEventListener('click', () => {// 动态播放动画的原理，实际上就是动态添加类名h1.classList.add('animate__animated', 'animate__bounceInRight', 'animate__slower')})// 动画播放结束事件h1.addEventListener('animationend', () => {h1.className = ''})
</script>

微信小程序：微信小程序的编码和HTML、CSS、JS编码格式差不多，可以参考使用微信开发手册。

移动互联应用学习心得相关推荐

河南城建计算机网络试卷,河南城建计算机网络技术学习心得体会.docx
河南城建计算机网络技术学习心得体会河南城建计算机网络技术学习心得体会计算机网络技术学习心得体会众所周知,21世纪是一个信息经济时代.为适应时代的发展,作为一名即将走出校园参加工作的当代大学生,所 ...
电脑硬件知识学习_关于网络学习心得体会集锦七篇
关于网络学习心得体会集锦七篇当在某些事情上我们有很深的体会时,好好地写一份心得体会,通过写心得体会,可使我们今后少走弯路.那么心得体会怎么写才能感染读者呢?以下是小编为大家收集的网络学习心得体会7篇 ...
巴菲特致股东的一封信：2012年和学习心得
原文请参考:http://www.berkshirehathaway.com/letters/2014ltr.pdf 学习心得: 主业运营良好: 对外投资的四大股票: 伯克希尔的四大投资-- 美国运通 ...
大学四年嵌入式学习心得体会
我所在学校是普通的本科院校,从大一开始加入嵌入式实验室,一直在实验室呆了三年半,从大一的懵懂无知,天天看着 C 语言书自己敲代码,到后来学习51单片机,STM32,做过3-4个项目,参加各种比赛,轻轻 ...
软件工程要学计算机网络吗,计算机网络与软件工程专业学习心得.docx
2014年计算机网络与软件工程专业--学习心得通过哈尔滨工业大学继续教育平台的学习,我学到了许多知识,以前对计算机网络及电子商务迷惑的地方.在平台上通过老师的讲解和实际演练我渐渐明白了. 所谓计 ...
吴恩达-神经网络和深度学习课程-学习心得(一)
前言: 陆陆续续学完了吴恩达老师在网易云课堂上开设的深度学习工程师微专业的部分内容(01.神经网络与深度学习,04.卷积神经网络,02.改善深层神经网络),在进一步应用实践之前,对之前的学习的内容做个 ...
计算机信息技术培训总结,信息技术培训学习心得体会
信息技术培训学习心得体会发布时间:2019-09-20 篇一:信息技术培训心得体会 20xx年x月x日--x月x日,我参加了景泰职专培训中心举办的为期x天的"景泰县xx 年教育技术培训&q ...
计算机网络学习心得—概述
计算机网络学习心得之概述 1.前言 2.计算机网络在信息时代中的作用 3.互联网概述 4.互联网的组成 4.1 互联网的边缘部分 4.2 互联网的核心部分 5.计算机网络的类别 6.计算机网络的性能 ...
Java EE学习心得
–Java EE学习心得 1. 称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...

移动互联应用学习心得

移动互联应用学习心得相关推荐

最新文章

热门文章