移动互联应用

最新推荐文章于 2023-11-24 15:58:52 发布

原创最新推荐文章于 2023-11-24 15:58:52 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

移动互联

transform平移、缩放、旋转、倾斜的使用：

平移：translate(a) translate(a,b)

a——水平平移的位置

a>0 水平向右平移

<0 向左平移

=0 保存原生位置不变

translateX() 水平方向 / translateY() 垂直方向

缩放：scale() 只控制水平方向放大:scaleX() 只控制垂直方向放大:scaleY()

旋转：rotate(a) rotateX() rotateY()

a 旋转的角度单位deg

a>0 顺时针

a<0 逆时针

倾斜：skew(a) skewX() ——水平方向的拉伸

a——角度值，单位是deg skewY() ——垂直方向的拉伸

一个值——水平方向的拉伸

两个值——水平方向的拉伸，垂直方向的拉伸

transform兼容性：

用border绘画三角形

动态风车

css样式： .box {

width: 500px;

height: 500px;

border: 1px solid black;

margin-left: 250px;

margin-top: 50px;

}

.box1 {

transform-origin: right bottom;

transform: rotate(0deg);

}

.box2 {

transform-origin: right bottom;

transform: rotate(90deg);

}

.box3 {

transform-origin: right bottom;

transform: rotate(180deg);

}

.box4 {

transform-origin: right bottom;

transform: rotate(270deg);

}

.box1,.box3 {

width: 0px;

height: 0px;

position: absolute;

top: 200px;

left: 300px;

border-width: 50px 100px;

border-color: transparent yellowgreen yellowgreen transparent;

border-style: solid;

}

.box2,.box4 {

width: 0px;

height: 0px;

position: absolute;

top: 200px;

left: 300px;

border-width: 50px 100px;

border-color: transparent rebeccapurple rebeccapurple transparent;

border-style: solid;

}

js代码： let box = document.querySelector('.box')

let box1 = document.querySelector('.box1')

let box2 = document.querySelector('.box2')

let box3 = document.querySelector('.box3')

let box4 = document.querySelector('.box4')

let a = 2, b = 92, c = 182, d = 272

let show = false

box.addEventListener('mouseenter', function () {

show = true

})

box.addEventListener('mouseleave', function () {

show = false

})

//顺时针旋转

setInterval(() => {

a=show ? a + 2 : a - 2

b=show ? b + 2 : b - 2

c=show ? c + 2 : c - 2

d=show ? d + 2 : d - 2

box1.style.transform = "rotate(" + a + "deg)"

box2.style.transform = "rotate(" + b + "deg)"

box3.style.transform = "rotate(" + c + "deg)"

box4.style.transform = "rotate(" + d + "deg)"

}, 10);

最终效果：

transition过渡动画

transition-property设置过渡动画生效的对应css样式属性

值:all_需要变化的所有样式都生效

none_没有样式生效变化效果

property_指定某一个需要变化的css样式属性生效

_需要指定多个变化属性,就用逗号分隔

transition-duration 动画变化的持续时间

transition-delay 动画变化的延迟时间

transition-timing-function 动画速度曲线

值： ease ease-in linear cubic-bezier()

复合写法: property duration timing-function delay

例: transition: all 2s linear;

#####

绘画钟表小练习：

css样式：

* {

margin: 0px;

padding: 0px;

}

ul {

width: 300px;

height: 300px;

background-color: black;

list-style: none;

padding: 8px;

border-radius: 50%;

border: 10px solid darkgray;

}

li {

width: 10px;

height: 10px;

background-color: white;

border-radius: 50%;

position: absolute;

left: 163px;

transform-origin: center 150px;

}

li:nth-child(5n+1) {

background-color: wheat;

height: 18px;

border-radius: 10px;

}

/* 表盘中心点 */

.dot {

width: 19px;

height: 20px;

background-color: blue;

position: absolute;

top: 160px;

left: 160px;

border-radius: 50%;

z-index: 1;

}

/* 绘制时针 */

.hour {

width: 19px;

height: 50px;

background-color: white;

position: absolute;

top: 130px;

left: 160px;

transform: rotate(0deg);

transform-origin: center 40px;

}

.hour::before {

content: "";

position: absolute;

top: -35px;

border-width: 18px 10px;

border-color: transparent transparent white transparent;

border-style: solid;

}

/* 绘制分针 */

.minute {

width: 15px;

height: 70px;

background-color: green;

position: absolute;

top: 110px;

left: 162px;

transform: rotate(0deg);

transform-origin: center 60px;

}

.minute::before {

content: "";

position: absolute;

top: -35px;

border-width: 18px 8px;

border-color: transparent transparent green transparent;

border-style: solid;

}

/* 绘制秒针 */

.sencend {

width: 9px;

height: 120px;

background-color: blue;

position: absolute;

top: 70px;

left: 165px;

transform: rotate(0deg);

transform-origin: center 100px;

}

.sencend::before {

content: "";

position: absolute;

top: -35px;

border-width: 18px 5px;

border-color: transparent transparent blue transparent;

border-style: solid;

}

html:

js代码：

let ul = document.querySelector('ul')

for (let i = 0; i < 60; i++) {

ul.innerHTML += "<li style='transform:rotate(" + i * 6 + "deg)'></li>"

}

//获取时分秒

let hour = document.querySelector('.hour')

let minute = document.querySelector('.minute')

let sencend = document.querySelector('.sencend')

//设置时间初始值

//获取当前系统时间

let myDate=new Date

let h = myDate.getHours()

let m = myDate.getMinutes()

let s = myDate.getSeconds()

sencend.style.transform = rotate(${s * 6}deg)

minute.style.transform = rotate(${m * 6}deg)

hour.style.transform = rotate(${h * 30}deg)

setInterval(() => {

s++

if (s >= 60) {

s = 0

m++

if (m >= 60) {

m = 0

h++

if (h >= 24) {

h = 0}

}}

sencend.style.transform = rotate(${s * 6}deg)

minute.style.transform = rotate(${m * 6}deg)

hour.style.transform = rotate(${h * 30}deg)

}, 1000);

成果图展示：

animation关键帧

animation-name：指定要调用的属性名

animation-duration：动画持续时间

animation-timing-function ：动画速度曲线

animation-delay：动画延迟时间

animation-iteration-count：指定动画演示的次数

animation-direction：控制动画的执行方向，一般设置在多次动画实现中

alternate 交替反向运行

reverse 反向

animation-fill-mode：控制最终显示的帧的位置

both 最后一帧+初始帧

forwards 最后一帧

backwards 保留第一帧

animation-play-state

复合属性用法：

设置关键帧：@keyframes 属性名

第一种写法：from to

第二种写法：百分比

3D构造

1-构造3D空间

transform-style: preserve-3d;

2-构造景深

perspective: 100px;

3-观察立体图形的角度

perspective-origin: 500% 200%;

*3D变化要求：必须要有父容器，并且，父容器需要构造一个3D空间

构造3D盒子

/* 父容器设置3D空间 */

.box{

width: 200px;

height: 200px;

/* 1-构造3D空间 */

transform-style: preserve-3d;

/* 2-构造景深 */

perspective: 500px;

/* 3-观察立体图形的角度 */

perspective-origin: 500% 200%;

position: relative;

top: 200px;

left: 200px;

transition: all 1s linear;

}

.box1{

width: 50px;

height: 50px;

background-color: royalblue;

position: absolute;

line-height: 50px;

text-align: center;

font-size: 20px;

opacity: 0.4;

}

.box1:first-child{

animation: mt 2s linear forwards;

@keyframes mt {

from{

transform: translateZ(0px);

}

to{

transform: translateZ(50px);

}

渐变色

1-线性渐变 : linear-gradient()

参数1——角度/ to 方向

参数2——开始的颜色

参数3——结束的颜色

2-径向渐变 :radial-gradient()

参数——开始颜色,结束颜色

3-重复渐变:repeating-linear-gradient() / repeating-radial-gradient()

1.重复线性渐变

参数1——角度/ to 方向

参数2——第1个颜色开始位置

参数3——第1个颜色结束位置

参数4——第2个颜色开始位置

参数5——第2个颜色结束位置

2.重复径向渐变

参数1——第1个颜色开始位置

参数2——第1个颜色结束位置

参数3——第2个颜色开始位置

参数4——第2个颜色结束位置

background-image: repeating-linear-gradient(to right,red 0px, red 10px,blue 0px,blue 30px);

background-image: repeating-radial-gradient(white 0px, white 10px,black 0px,black 30px);

分栏布局

分栏的数量:column-count: 2

分栏线的样式:column-rule: 1px solid red

以下属性，设置了分栏数就不生效

每个栏目内容与分栏线的间距: column-gap

每个栏目的宽度: column-width

响应式布局

/* 只要屏幕宽度 < 800px就生效 */

@media screen and (max-width: 800px) {

.box {

background-color: yellow;

}

/* 只要屏幕宽度 > 800px就生效 */

@media screen and (min-width: 800px) {

.box {

background-color: red;

}

/* 只要屏幕 300px> 宽度 > 600px就生效 */

@media screen and (max-width: 600px) and (min-width: 300px){

.box {

background-color: green;

}

child混乱

子元素是不同类型的排序————————真正位置上的

:first-child 匹配父元素中的第一个子元素，该元素必须是父元素中真正的第一个子元素

:last-child 匹配父元素中的最后一个子元素，该元素必须是父元素中真正的最后一个子元素

:nth-child(n) 改变所有行数样式，2n+1奇数行，2n偶数行，括号里填你要改变的行数；

n可以是关键字：even偶数，odd奇数

子元素是同类型间的排序

:first-of-type 匹配父元素中的同元素类型（div\p\span等）间的第一个子元素

:last-of-type 匹配父元素中的同元素类型（div\p\span等）间的最后一个子元素

:nth-of-type(n) 匹配父元素的同元素类型（div\p\span等）间的第n个子元素

jQuery

使用方法：

使用jQuery

1-引入jQuery的js文件

2-jquery基础语法 $('selctor').action()

selctor————css相关的选择器名

action()——操作方法、事件函数

3.js获取的dom对象：

var box = document.querySelector(".box");

4.获取jquery对象——不会局限于数量，返回的都是数组集合：

var $box = $('.box')

5.用jquery的方法获取dom对象：

var $boxDom = $('.box')[0]

6.用get函数获取jquery的dom对象：

get的参数代表该元素在jquery数组对象里面的下标

var $boxGet = $('.box').get(0)

jQuery筛选器

1.获取第一个/最后一个

var $boxFirst = $('.box').first()

var $boxLast = $('.box').last()

2.eq(下标值从0开始)

var $box4 = $('.box').eq(3)[0]

3.前一个——同级

var $spanPrev = $('.ispan').prev()

4.前所有——同级，但是出来的数据顺序是倒叙的

var $spanPrevAll = $('.ispan').prevAll()

5.后一个——同级

var $spanPrev = $('.Bspan').next()

6.后所有——同级，出来的数据顺序顺的

var $spanPrevAll = $('.Bspan').nextAll()

8.parent()

console.log($('.span2').parent());

9.parents() _ 找到所有父亲

console.log($('.span2').parents());

10.siblings()_找同级兄弟

console.log($('.span1').siblings());

11.find()_找子级满足条件的元素

console.log($('.box').find('div'));

12.index()_找元素的索引

console.log($('.box:nth-child(4)').index());

13.closest('B') _ 找到选择器A 的最近满足条件B的开始于当前元素的一个节点

console.log($('.span2').closest('.box'));

console.log($('.span2').closest('div'));

console.log($('.box3').closest('div'));

jQuery操作元素

html()——同innerHTML()

console.log($('.box').html());

在某个元素内部添加/替换元素

console.log($('.box').html(<div>1</div>));

text()——同innerText()

console.log($('.box').text());

val()——读取/修改表单元素的值

console.log($('input').val());

console.log($('input').val("好上加好"));

console.log($('input').val());

添加元素

A被添加的元素（父），B添加的元素（子）、A.append(B)___向A的最后一个子节点添加元素

$('.box1').eq(0).append(myY)

$('body').append(myY)

$(B).appendTo(A) B必须通过$来进行操作、把B添加到A里面

$(myY).appendTo($('.box1').eq(2))

prepend()——向A的第一个子节点添加元素

$('body').prepend(myY)

prependTo()——把$(B)添加到A里

$(myY).prependTo($('body'))

before()、 after()向指定的位置前/后添加元素

$('.box1').eq(1).before(myY)

$('.box1').eq(1).after(myY)

insertBefore()/insertAfter()___把。。（子）。。添加到..（父）.里面去

$(myY).insertBefore($('.box1').eq(1))

$(myY).insertAfter($('.box1').eq(1))

jQuery操作类名

注意都不要加小数点

hasClass() —— 判断类名是否存在,返回值为 true/false

console.log($('div').hasClass('box1'));

addClass()_ 添加类名

console.log($('div').addClass('box4'));

removeClass()_删除类名

console.log($('div').removeClass('box2'));

toggleClass()

获取切换按钮——只要原生有当前类名，他就会删除；没有当前类名，就会添加

console.log($('div').toggleClass('box2'));

jQuery操作样式

获取指定样式 .css('样式属性名')

var box1css = $('.box1').css('width')

var box1css = $('.box1').css('opacity')

console.log(box1css);

修改指定样式名的值 .css('样式属性名','值')

var box2css = $('.box1').css('width','200px')

console.log(box1css);

console.log(box2css);

通过函数来给样式属性名赋值

参数1 要修改的样式属性名

$('.box1').css('width',function (index,v) {

index 每一个下标

console.log(index);

v 每一个对应的width 的初始值

console.log(v);

if (index % 2 == 0) {

如果下标是2的倍数，就为其的width改值__通过return返回的就是要修改的值

return '300px'

}

})

修改多个样式 css({样式1:值,样式2:值})

$('.box1').eq(0).css({

width:200,

'background-color':'red'

})

jQuery操作属性

attr() 修改原生属性class的值 console.log($('div').attr('class'));//box1 console.log($('div').attr('class','box2'));

removeAttr() 既可以移出自定义属性，也可以移出原生属性 console.log($('div').removeAttr('class'));

prop() 查询到原生属性值，也可以修改原生属性，并且，修改后的原生属性值，会显示在页面的标签中 console.log($('div').prop('class')); console.log($('div').prop('class','box2'));

removeProp() 原生属性+原来的自定义属性不可移出只可移出，由prop添加的自定义属性 console.log($('div').removeProp('class'));

jQuery获取元素尺寸

(1)width() / height()

截取宽度:元素本身的宽高

(2)innerWidth() / innerHeight() :

截取宽度（width+左padding+右padding）

(3)outerWidth() / outerHeight() :

截取宽度 (width+左boder+右boder+左padding+右padding)

(4)outerWidth(true) / outerHeight(true) :

截取宽度 (width+左boder+右boder+左padding+右padding +左margin + 右margin)

jQuery获取偏移量

(1)offset() 返回的对象值都是包含了非定位的偏移量 console.log($('.box1').offset()); (2)position() 返回的对象值只会算定位的偏移量 console.log($('.box1').position());

jQuery获取滚动条的位置

(1)scrollLeft() 滚动条距离左边的px

console.log($('html').scrollLeft());

(2)scrollTop() 滚动条距离上边的px

console.log($('html').scrollTop());

jQuery事件绑定on

1.基础事件绑定on('监听的事件名click\mouseover',function(){})

2.事件委托绑定事件——父委托给子 on('监听的事件名click\mouseover','交给谁委托的选择器',function(){})

委托事件完成后，父亲就不会触发事件，而接到委托的选择器才会触发事件

例：$(".box2").on("click", ".box3", function () { console.log(1111); });

3.批量事件绑定 on({事件1:function () {事件1逻辑},事件2:function () {事件2逻辑}})

one()事件只会触发一次

jQuery解绑事件

1.off('需要解绑的事件处理函数')

$('.box2').off('click')

2.off('需要解绑的事件处理函数',所要指定解绑的事件名)

$('.box2').off('click',B)

常用的jQuery事件处理函数

直接使用：

click('事件处理函数')

mouseover('事件处理函数')

mouseout('事件处理函数')

change('事件处理函数')——————只作用于表单

hover('事件处理函数')——————移入/移出都会触发的函数

jQuery动画函数

1.show()————显示例：$("button") .eq(0) .click(function () { $(".box1").show(3000, function () { console.log("完成"); }); $('.box1').show(3000,'linear') }); 2.hide()————隐藏 3.toggle()————切换

4.折叠动画函数：

（1）.slideDown() （2）.slideUp() （3）.slideToggle() 5.渐隐渐显动画函数（1）fadeIn() （2）fadeOut() （3）fadeToggle() （4）fadeTo()——————多一个指定到的透明度 0~1

jQuery中的animate:

结束动画:

6.stop()——暂停——停止在当前位置，也就是下一次动画的开始 7.finish()————结束——瞬间结束

jQuery的ajax请求

canvas基本使用

基本步骤：

1-获取canvas对象

var myCan = document.getElementById('cavs')

2-获取canvas画布2d空间，就通过它来执行绘制相关的操作

var myCont = myCan.getContext('2d')

3-指定绘画的起始位置

myCont.moveTo(200,200)

4-指定绘画的结束位置

myCont.lineTo(400,400)

设置绘画的颜色

myCont.strokeStyle = "red"

设置线条的宽度

myCont.lineWidth = 10

设置线条结束端点的样式__square/butt(默认)/round

myCont.lineCap = "round"

5-执行绘制

myCont.stroke()

填充空间

1.fill()

修改填充颜色————必须再执行填充之前 myCont.fillStyle = "red"; 进行填充 myCont.fill();

2.渐变色填充

（1）必须先创建渐变色块

1.createLinearGradient(x0当前填充快在画布中的起始X坐标,y0当前填充快在画布中的起始y坐标,x1当前填充快在画布中的结束X坐标,y1结束y坐标)

var myG = myCont.createLinearGradient(150, 150, 200, 200);

2. 起始圆心的x,y,起始圆半径、结束圆心x,y,结束圆半径

var myG = myCont.createRadialGradient(200, 200,100, 100, 100,100);

addColorStop(渐进范围,'颜色')，为渐进色块填充颜色

myG.addColorStop(0, "red");

myG.addColorStop(0.5, "blue");

myG.addColorStop(1, "yellow");

（2）渐变色块赋给fillStyle

myCont.fillStyle = myG;

矩形绘制

（1）空心矩形 strokeRect()

myCont.strokeRect(起始点x坐标,起始点y坐标,宽,高)

myCont.strokeRect(200,200,100,100)

（2）实心矩形 fillRect()

myCont.fillStyle = "red"

myCont.fillRect(200,200,100,100)

圆弧绘制

弧度的计算=角度数*（Math.PI/180°）

起始角度 0 ----起始弧度 0（Math.PI/180°）------ 右边3点钟方向为 0 度结束角度 180 --- 结束弧度 180（Math.PI/180°） arc(100圆心的x坐标,100圆心的y坐标,50圆的半径,0圆弧的起始弧度,180(Math.PI/180)圆弧的结束弧度,true逆时针画/false顺时针) 例：myCont.beginPath() myCont.arc(200,200,100,0,180(Math.PI/180)) myCont.closePath() myCont.stroke()//执行绘制线条

扇形绘制

myCont.beginPath()

绘制起始位置

myCont.moveTo(200,200)

画圆弧

myCont.arc(200,200,100,0,27*(Math.PI/180))

myCont.strokeStyle = "red"

myCont.fillStyle = "red"

myCont.fill()

执行绘制

myCont.stroke()

图片绘制