前端小笔记

本文主要记录前端小笔记

网页头部添加Icon图标

记得放在项目的根目录

1
2
<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
<link rel="apple-touch-icon" href="favicon.png">

插入audio音乐播放

1
2
3
<audio id="uploadMusic" controls="controls" loop="loop" preload="auto" hidden
src="https://cdn.jsdelivr.net/gh/onecoderly/cdn/music/good-bgm.mp3">
</audio>

目前浏览禁止了自动播放的设置,需要用户有了响应事件(比如点击),然后才可以:

uploadMusic.play()

CSS

适配手机端语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 即宽度小于等于420px时触发 */
@media (max-width: 420px){
.col-sm-6.col-md-3.adapt1 {
position: relative;
top: 2.5rem;
}
}
/* 即宽度大于等于420px时触发 */
@media (min-width: 420px){
.col-sm-6.col-md-3.adapt1 {
position: relative;
top: 2.5rem;
}
}

绝对定位、相对定位、固定定位:

绝对定位脱离了文档流,绝对定位元素渲染时它依赖的元素已经渲染完成 百分比是可以计算出来的。
而相对定位,子元素的高度会影响父元素,此时父元素高度未知,要等子元素高度确定,父元素高度才确定。
注意:单独使用relative的时候,top:%不会移动,但是换成px会移动。

相对定位 relative

设置right为正值,元素往左移动,bottom设置正值,元素往上移动。负值则往与正值相反的方向移动
设置left为正值,元素往右移动,top设置正值,元素往下移动。

  • 设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置
  • 设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响(没有脱离标准文档流)
  • 设置相对定位的盒子原来的位置会被保留下来(之前的位置被空出来了,会影响页面布局)
  • 相对定位的特性
    • 相对于自己的初始位置来定位
    • 元素位置发生偏移后,它原来的位置会被保留下来(所以其他元素因此移动)
    • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
  • 相对定位的使用场景
    • 相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量

绝对定位 absolute

  • 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移( 定位的基准是相对于最近的祖先元素在定位,没有则以浏览器窗口进行定位 )
  • 如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
  • 绝对定位的元素脱离标准文档流,这意味着它们对其他元素的定位不会造成影响
  • 元素位置发生偏移后,它原来的位置不会被保留下来
  • 设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
    在网页制作中可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况

固定定位 fixed

  • 固定定位的特性
    • 相对浏览器窗口来定位
    • 偏移量不会随滚动条的移动而移动
  • 固定定位的使用场景
    • 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

CSS3渐变

线性渐变

  • 颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
  • linear-gradient ( position渐变方向, color1第一种颜色值, color2第二种颜色,…)
    To right从左到右

很喜欢的字体渐变色

1
2
3
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;

好看的背景色

background: linear-gradient(90deg, rgba(247,149,51,0.101961) 0, rgba(243,112,85,0.101961) 15%, rgba(239,78,123,0.101961) 30%, rgba(161,102,171,0.101961) 44%, rgba(80,115,184,0.101961) 58%, rgba(16,152,173,0.101961) 72%, rgba(7,179,155,0.101961) 86%, rgba(109,186,130,0.101961) 100%)

鼠标悬浮图片旋转

1
2
3
4
5
6
/* 作用于 img:hover,一圈就是360deg */
transform: rotate(angle) /*指定元素的 2D 旋转,eg:-360deg*/
/* 作用于 img */
transition: all 0.6s /*设定旋转的动画时间*/
/* 进阶:设定旋转围绕的圆心 */
transform-origin: 90% 40%;

让图片逐渐缩小半径

1
2
clip-path: circle(400px at center 100px);
clip-path: circle(100px at center 100px);

盒子

  1. 溢出处理

    box-sizing: border-box;

  2. 添加阴影

    box-shadow: 0 0 10px #ddd;

去除a标签各状态下的下划线

1
2
3
4
5
6
7
a:link{text-decoration:none; }  /* 去掉被点击后出现的下划线*/

a:visited{text-decoration:none; }/*指已经访问过的链接*/

a:hover{text-decoration:none;}/*指鼠标在链接*/}

a:active{text-decoration:none;}/* 指正在点的链接*/

iframe嵌套页面用法

在HTML中写入iframe标签

1
<iframe name="my-iframe" id="my-iframe" src="初始显示的页面或者图片" frameborder="边框(一般为0)" width="宽" height="高" scrolling="是否滚动(一般为'no')"></iframe>

在HTML中写入a标签,当点击a标签时,子页面跳转到所需的页面

1
2
<a href="要跳转的页面l"  target="与iframe的name对应">点击我子网页可以跳转到你需要的地方</a>
<!-- 与id对应的话IE10等版本中可能不兼容 -->

如果有多个子页面之间切换,只需要多写几个a标签,并且将它的href换成你所要跳转的html页面即可。切记,target是不变的,和先前的iframe保持一致!!!iframe标签只需要一个。

参考链接

居中方式

  1. 把margin设为auto
    具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。

  2. 使用 text-align:center
    这个没什么好说的,只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的。

  3. 使用line-height让单行的文字垂直居中
    把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。

  4. 使用display:table-cell来居中
    对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。例如:

    但是,这种方法只能在IE8+、谷歌、火狐等浏览器上使用,IE6、IE7都无效。

  5. position: absolute;
    left: 50%;
    top: 50%;
    // 相对于自身长宽移动50%
    transform: translate(-50%, -50%);

  6. 使用绝对定位来进行居中
    此法只适用于那些我们已经知道它们的宽度或高度的元素。
    绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半。

  7. 使用浮动配合相对定位来进行水平居中
    浮动居中的原理是:把浮动元素相对定位到父元素宽度50%的地方,但这个时候元素还不是居中的,而是比居中的那个位置多出了自身一半的宽度,这时就需要他里面的子元素再用一个相对定位,把那多出的自身一半的宽度拉回来,而因为相对定位正是相对于自身来定位的,所以自身一半的宽度只要把left 或 right 设为50%就可以得到了,因而不用知道自身的实际宽度是多少。
    这种使用浮动配合相对定位来居中的方法,优点是不用知道要居中的元素的宽度,即使这个宽度是不断变化的也行;缺点是需要一个多余的元素来包裹要居中的元素。
    看下代码:

    参考文档

跳动的桃心

1
2
3
<span class="with-love">
<i class="fa fa-heart" id="hearts"></i>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 自定义页脚跳动的心样式 ,记得 id="heart"给i图标添加的*/
#hearts {
animation: heartsAnimate 1.33s ease-in-out infinite;
}
@keyframes heartsAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
.with-love {
color: #f10610;
}

给图片添加悬浮透明特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
.love-item img:hover {
-webkit-animation: shade 3s ease-in-out 1;
-moz-animation: shade 3s ease-in-out 1;
-ms-animation: shade 3s ease-in-out 1;
-o-animation: shade 3s ease-in-out 1;
animation: shade 3s ease-in-out 1;
transform: scale(1.1);
}

/* 定义关键帧 */
@-webkit-keyframes shade {
from {
opacity: 1;
}
15% {
opacity: 0.4;
}
to {
opacity: 1;
}
}

@-moz-keyframes shade {
from {
opacity: 1;
}
15% {
opacity: 0.4;
}
to {
opacity: 1;
}
}

@-ms-keyframes shade {
from {
opacity: 1;
}
15% {
opacity: 0.4;
}
to {
opacity: 1;
}
}

@-o-keyframes shade {
from {
opacity: 1;
}
15% {
opacity: 0.4;
}
to {
opacity: 1;
}
}

@keyframes shade {
from {
opacity: 1;
}
15% {
opacity: 0.4;
}
to {
opacity: 1;
}
}

流光按钮效果

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="javascript:;">coderblue</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* {
padding: 0;
margin: 0;
}
body {
background-color: #000000;
}
a {
text-decoration: none;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
font-size: 24px;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
/* 背景图片变大 */
background-size: 400%;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
/* 转换成大写 */
text-transform: uppercase;
border-radius: 50px;
z-index: 1;
}
/* 添加外层图层,伪元素,也可after */
a::before {
content: '';
position: absolute;
left: -5px;
top: -5px;
bottom: -5px;
right: -5px;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 50px;
/* 滤镜,变虚 */
filter: blur(20px);
z-index: -1;
}
a:hover::before {
animation: sun 8s infinite;
}
a:hover {
animation: sun 8s infinite;
}

@keyframes sun {
100% {
background-position: -400% 0;
}
}

js

单击图片查看方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!-- 图片单击效果 -->
<script>
function createImgEventFullScreen() {
// .article-entry图片的父级元素,f12查看图片即有
var imgs = $(".article-entry").find("img");
for (var i = 0; i < imgs.length; i++) {
// $(imgs[i]).click(createCover(imgs[i]));
imgs[i].onclick = function (e) {
var src = e.srcElement.currentSrc;
var _this = $(this);
createCover(src, _this);
}
}

function createCover(src, _this) {
var cover = $(
"<div id='outerDiv' style='position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:5;width:100%;height:100%;display:none;'><div id='innerDiv' style='position:absolute;'><img id='bigImg' style='border:5px solid #fff;' src=''/></div></div>"
);
$("#outerDiv").remove();
$("body").append(cover);
imgShow("#outerDiv", "#innerDiv", "#bigImg", _this, src);

}
}

function imgShow(outerDiv, innerDiv, bigImg, _this, src) {
//var src = _this.attr("src"); //获取当前点击的common-img元素中的src属性
$(bigImg).attr("src", src); //设置#bigImg元素的src属性

/*获取当前点击图片的真实大小,并显示弹出层及大图*/
$("<img/>").attr("src", src).load(function () {
var windowW = $(window).width(); //获取当前窗口宽度
var windowH = $(window).height(); //获取当前窗口高度
var realWidth = this.width; //获取图片真实宽度
var realHeight = this.height; //获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8; //缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放

if (realHeight > windowH * scale) { //判断图片高度
imgHeight = windowH * scale; //如大于窗口高度,图片高度进行缩放
imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
if (imgWidth > windowW * scale) { //如宽度仍大于窗口宽度
imgWidth = windowW * scale; //再对宽度进行缩放
}
} else if (realWidth > windowW * scale) { //如图片高度合适,判断图片宽度
imgWidth = windowW * scale; //如大于窗口宽度,图片宽度进行缩放
imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
} else { //如果图片真实高度和宽度都符合要求,高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigImg).css("width", imgWidth); //以最终的宽度对图片缩放

var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距
$(innerDiv).css({
"top": h,
"left": w
}); //设置#innerDiv的top和left属性
//console.log('****')
$(outerDiv).fadeIn("fast"); //淡入显示#outerDiv
});

$(outerDiv).click(function () { //再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
setTimeout(function () {
createImgEventFullScreen();
}, 1000)
</script>

jQuery的append拼接用法

隐藏与显示的转换

隐藏:display: none;如果不需要进去就隐藏,就可以使用hide()
显示:如果jQuery的话,可以使用。$(‘选择’).show()

toFixed 小数点后取余, spilt(“”)切割

近日实现如下功能,获取到的值前需要填充0,开始感觉有点绕,遂想记录下

1
2
3
4
5
6
7
8
9
10
function changeSpanValue(data, choiceClass) {
let arr = []
const length = data.COUNT.toString().length
arr = data.COUNT.toString().split("")
$(choiceClass).children().text(0)
for (let i = 0; i < length; i++) {
let choice = choiceClass + ' span:nth-child(' + (5 - i) + ')'
$(choice).text(arr[length - 1 - i])
}
}

主要思路:还是获取选择的class 和 data值,然后使用 spilt(“”)切割,切记添加’’ 或 “” ,才能正常切割为一个个字符串。
然后先所有的都填充为0,再循环从最后面的0依次赋值。

1
2
3
4
5
6
截取字符串
for (let i = 0; i < length; i++) {
arr.push(data.COUNT.toString().substring(i, i + 1))
}

arr = data.COUNT.toString().split("") //注意加 ""

toFixed 小数点后取余

随机数向下取整

1
2
Math.floor((Math.random() * 3))
// 结果:有0,1,2
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信