整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

js和css基础知识总结


.em字体设置

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
复制代码

2.背景图标居右

.aa{
    background-image: url(arrow.png)no-repeat right center;
    background-image:url(nav-bar.jpg);
    background-repeat:no-repeat;
    background-position:right center;
}
复制代码

3.文本框超出部分显示省略号：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;    
复制代码


我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

一蒙版出现禁止页面滚动

1 window.onscroll=function(){
    document.body.scrollTop = 0
};

2 $('html,body').animate({scrollTop:'0'},100);
$(".tan").bind('touchmove',function(e){  //禁止弹出框出来时进行滑动 
    e.preventDefault();
});
3 document.body.style.overflow='hidden';
若键盘点击的话,就要加上:
var move=function(e){
    e.preventDefault && e.preventDefault();
    e.returnValue=false;
    e.stopPropagation && e.stopPropagation();
    return false;
}
var keyFunc=function(e){
    if(37<=e.keyCode && e.keyCode<=40){
        return move(e);
    }
}
document.body.onkeydown=keyFunc;

复制代码

二、按钮点击事件

var button=$(':button');
button.on('click',function(){
    button.css('background-color','white');
    $(this).css('background-color','#FB3336');
})
复制代码

三、安卓手机里，h5页面没有充满body导致左右滑动的问题

首先声明一下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
然后
html,body {width:100%;height:100%;overflow-x:hidden;}

复制代码

四、关于页面左右滚动的问题

1.<body scoll=no> 全禁止
2.<body style="overflow:scroll;overflow-y:hidden"> 禁止纵向滚动条
3.<body style="overflow:scroll;overflow-x:hidden"> 禁止纵向滚动条
4.overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
5.overflow: auto; 在需要时内容会自动添加滚动条
6.overflow: scroll; 总是显示滚动条
7.overflow-x: hidden; 禁止横向的滚动条
8.overflow-y: scroll; 总是显示纵向滚动条
复制代码

五、 content && header之间的亮条怎么消除

.mui-bar-nav{
    -webkit-box-shadow: none;
    box-shadow: none;
}
复制代码

六、删除选项

$(".shanchu").click(function(){
    $(this).parent().remove()
})
复制代码

七、表单提交按钮时，鼠标放在上面显示小手的方法：

需要对元素属性的css的cursor进行设置
1、default    默认光标（通常是一个箭头）
2、auto   默认。浏览器设置的光标。 
3、crosshair   光标呈现为十字线。    
4、pointer    光标呈现为指示链接的指针（一只手）    
5、move    此光标指示某对象可被移动。    
6、e-resize    此光标指示矩形框的边缘可被向右（东）移动。    
7、ne-resize    此光标指示矩形框的边缘可被向上及向右移动（北/东）。    
8、nw-resize    此光标指示矩形框的边缘可被向上及向左移动（北/西）。    
9、n-resize    此光标指示矩形框的边缘可被向上（北）移动。    
10、se-resize    此光标指示矩形框的边缘可被向下及向右移动（南/东）。    
11、sw-resize    此光标指示矩形框的边缘可被向下及向左移动（南/西）。  
12、s-resize    此光标指示矩形框的边缘可被向下移动（南）。    
13、w-resize    此光标指示矩形框的边缘可被向左移动（西）。    
14、text    此光标指示文本。    
15、wait    此光标指示程序正忙（通常是一只表或沙漏）。    
16、help    此光标指示可用的帮助（通常是一个问号或一个气球）。    
要实现鼠标移上去显示手形、需要在你的提交按钮上增加css cursor属性，并将它的值设置为pointer;
如下：<input type="submit" name="submit" value="发布留言" class="subimt" onclick="display_alert()" style="cursor:pointer" />
复制代码

八、怎么清除table里面tbody的内容

$("#test tbody").html("");
复制代码

九、动态获取表格的行数

var bv=$("#tabd tr").length-1;
$("#sp4").html(bv);     //动态的获取注数
复制代码

十、多个按钮点击变色，再点击还原

$(".jixuan  input[type=button]").toggle(function(){
    $(this).css("background-color","yellow");
    $(this).css("cursor","pointer")
    },function(){
    $(this).css("background-color","white");
    $(this).css("cursor","pointer");
}) 
复制代码

十一、单选按钮顾名思义用于单选的场合,例如,性别,职业的选择等,语法如下:

<input type="radio" name="gender" value="男" checked />
常用属性迅美科技整理如下:
1.type="radio"
type属性设置为radio,表示产生单一选择的按钮,让用户单击选择;
2.name="gender"
radio组件的名称,name属性值相同的radio组件会视为同一组radio组件,而同一组内只能有一个radio组件被选择;
3.value="男"
radio组件的值,当表单被提交时,已选择的radio组件的value值,就会被发送进行下一步处理, radio组件的value属性设置的值 
无法从外观上看出,所以必须在radio组件旁边添加文字,此处的文字只是让用户了解此组件的意思.
4.checked
设置radio组件为已选择,同一组radio组件的name性情值必须要相同
复制代码

十二、网页中，公共头部和侧边栏的引用

1、<?php include("header.html");?>
2、使用ssi技术页面生成shtml文件，只用在头部文件位置加入<!--#include file="header.htm" -->，
然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好，需要处理的文件在服务器端完成的，
不会加重访问者的浏览器负担。
复制代码

十三、锚点链接上下定位偏移解决

1、JS解决的方法

if (window.location.hash.indexOf('#') >= 0) {
    $('html,body').animate({
    scrollTop: ($(window.location.hash).offset().top - 50) + "px"
    },
    300);
}; //主要修复评论定位不准确BUG
$('#comments a[href^=#][href!=#]').click(function() {
    var target = document.getElementById(this.hash.slice(1));
    if (!target) return;
    var targetOffset = $(target).offset().top - 50;
    $('html,body').animate({
        scrollTop: targetOffset
    },
    300);
    return false;
}); //主要修复评论定位不准确BUG
复制代码

2、解决办法

能用css自然不想用js解决，因为在加载方面，css总是先加载，并且速度很快。

typecho的评论HTML结构是这样的：

<li id="comment-277" class="comment-body comment-child comment-level-odd comment-even comment-by-author">
我们给comment-body加上css

.comment-body {
    position: relative;
    padding-top: 50px;
    margin-top: -50px;
}
/*修复评论跳转定位问题*/
完美兼容chrome和Firefox，其他浏览器未测试。
复制代码

十四、蒙版弹出禁止蒙版后面的内容滚动

.ovfHiden{overflow: hidden;height: 100%;}
$('.bzh .l1 a').click(function(){
    $(".baok").show();
    $(".baod").show();
    $('html,body').addClass('ovfHiden');
});
$('.baod .img1').click(function(){
$('html,body').removeClass('ovfHiden');
    $(".baok").hide();
    $(".baod").hide();
})；
复制代码

十五、获取复选框点击的次数

$("#compute").click(function(){
    $('input').live('click',function(){ 
    //alert($('input:checked').length); 
    $("#show").html($('input:checked').length);
    });
})；
复制代码

十六、Tab选项卡切换

1.js

$('footer ul li').click(function(){
    var index = $(this).index();
    $(this).attr('class',"content").siblings('ul li').attr('class','ss');
    $('.content').eq(index).show(200).siblings('.content').hide();
    });

$('.ka ul li').click(function(){
    var index = $(this).index();
    $(this).attr('class',"zi").siblings('ul li').attr('class','ll');
    $(this).parent().next().find(".zi").hide(). eq(index).show();
});
复制代码

2.html

<div class="carindex-cnt">
        <ul class="nav">
            <li>续保方案</li>
            <li>热销方案</li>
            <li>自定义方案</li>
        </ul>
        <div class="tabcontent">
            <div class="zi">
                <p class="altp">此方案为您上一年的投保记录</p>
                <ul class="xiur">
                    <li>
                        <label for="saveType2">交强险</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <label for="saveType2">商业险</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <p class="title">商业主险</p>
                <ul class="xiur">
                    <li>
                        <span>车辆损失险</span>
                        <label for="abatement0" class="labels">
                            <input class="mui-checkbox checkbox-green" type="checkbox" name="abatement" >
                        </label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                  
                </ul>
            </div>
            <div class="zi" style="display: none">
                <ul class="xiur">
                    <li>
                        <label for="saveType2">交强险</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <label for="saveType2">商业险</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
</div>  
复制代码

3.js

$('.nav li').click(function () {
    var index = $(this).index();
    $(this).parent().next().find(".zi").hide().eq(index).show();
})

复制代码

十七、form表为空时，提交按钮禁用

$(function(){            
    $('.main button').click(function(){
        if(($('.ip1').val() !="") && ($('.ip2').val() !="")){
            $('.main button').css('background','#ff8100');
            $('.main button').attr('disabled', true);
            }else{
            $('.main button').css('background','#D0D0D0');
            $('.main button').attr('disabled', false);
        }
    })
})
复制代码

十八、上拉事件和下拉事件

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();               //滚动条距离顶部的高度
    var scrollHeight =$(document).height();                   //当前页面的总高度
    var windowHeight = $(this).height();                   //当前可视的页面高度
    if(scrollTop + windowHeight >= scrollHeight){    //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
        alert("上拉加载，要在这调用啥方法？");
    }else if(scrollTop<=0){         //滚动条距离顶部的高度小于等于0
        alert("下拉刷新，要在这调用啥方法？");
    }
});                                                          ——>移动端

$(function(){    
    $(window).scroll(function() {  
        var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();  
        var positionValue = (scrollTop + windowHeight) - scrollHeight;  
        if (positionValue == 0) {  
            //do something  
        }  
    });  
});  
复制代码

十九、左滑和右滑事件

var obj;
var startx;
var starty;
var overx;
var overy;
    for(var i=1;i<=$("li").length;i++){          //为每个li标签添加事件
    obj = document.getElementById(i);       //获取this元素
    evenlistener(obj);      //调用evenlistener函数并将dom元素传入，为该元素绑定事件
}

function evenlistener(obj){
    obj.addEventListener('touchstart', function(event) {        //touchstart事件,当鼠标点击屏幕时触发
    startx = event.touches[0].clientX;              //获取当前点击位置x坐标
    starty = event.touches[0].clientY;              //获取当前点击位置y坐标
    $(".sdf").text("x:"+startx+",y:"+starty+"")     //赋值到页面显示
    } , false);         //false参数,设置事件处理机制的优先顺序，具体不多说，true优先false
    obj.addEventListener('touchmove', function(event) {         //touchmove事件,当鼠标在屏幕移动时触发
    overx = event.touches[0].clientX;           //获取当前点击位置x坐标
    overy = event.touches[0].clientY;           //获取当前点击位置y坐标
    var $this = $(this);            //将dom对象转化为jq对象，由于项目用到jquery，直接使用其animate方法

    if(startx-overx>10){         //左滑动判断，当左滑动的距离大于开始的距离10进入
    $($this).animate({marginLeft:"-55px"},150);         //实现左滑动效果
    }else if(overx-startx>10){       //右滑动判断，当右滑动的距离大于开始的距离10进入
    $($this).animate({marginLeft:"0px"},150);           //恢复
    }
} , false);
    obj.addEventListener('touchend', function(event) {          //touchend事件,当鼠标离开屏幕时触发，项目中无用到，举例
    $(".sf").text("x:"+overx+",y:"+overy+"")
    } , false);
}
复制代码

二十、各大浏览器的判断

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie){
    $("*").css({fontFamily:"微软雅黑"});
};
if (window.ActiveXObject){
Sys.ie = ua.match(/msie ([\d.]+)/)[1];
if (Sys.ie<=9){
    alert('你目前的IE版本为'+Sys.ie+'版本太低，请升级！');
    location.href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie";
    }
}
var UA=navigator.userAgent;
if(is360se = UA.toLowerCase().indexOf('360se')>-1 ){

}else{
    $("*").css({fontFamily:"微软雅黑"});
}

360浏览器基于IE内核的，360急速浏览器内核基于谷歌的
复制代码

二十一、form表单中点击button按钮刷新问题

button,input type=button按钮在IE和w3c，firefox浏览器区别： 
1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。 
2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。
为button按钮增加一个type=”button”属性。
复制代码

二十二、textrare文字输入提示：

<textarea name="" id="sign" maxlength=30 onKeyUp="keypress1()"></textarea>
<div class="tish">
<span id="number">0</span><span>/30</span>
</div>

function keypress1() //text输入长度处理 
{ 
    var text1=document.getElementById("sign").value; 
    var len=text1.length; 
    var show=len; 
    document.getElementById("number").innerText=show; 
} 
复制代码

二十三、iframe操作

1：父页面操作iframe子页面

$('#ifrme').load(function(){
$('#ifrme').contents().find('.baod .img1').click(function(){
    $(.ifrme').contents().find('.baod').hide();
    $('.baok',window.parent.document).hide();
    $('html,body',window.parent.document).removeClass('ovfHiden');
    });
})
* .ifrme父页面的ID为iframe的父级
    .baod .img1是iframe页面里的元素
复制代码

2：子页面操作父页面

$('.baod .bt1').click(function(){
    $('.baod').hide();
    $('.edit',window.parent.document).hide();
    $(".baok", window.parent.document).hide(); 
    $('html,body',window.parent.document).removeClass('ovfHiden');
});
*.baod .bt1子页面里的元素
window.parent.document父级窗口
.edit父级页面元素
复制代码

二十四、toggle开关切换图标或是元素的隐藏

$('.other .pg').click(function(){
    $(this).toggleClass ("pots");
    $('.below').slideToggle(300);
})

* .other .pg元素名称
pots 点击元素要切换的图标（以background()形式的图标）
.below要进行toggle的内容
复制代码

二十五、弹框居中

$(".btnDel").click(function() {  
//$(".box-mask").css({"display":"block"});  
    $(".box-mask").fadeIn(500);  
    center($(".box"));  
    //载入弹出窗口上的按钮事件  
    checkEvent($(this).parent(),            $(".btnSure"), $(".btnCancel"));  
});  *center  弹框名称

function center(obj) {  
    //obj这个参数是弹出框的整个对象  
    var screenWidth = $(window).width(), screenHeigth = $(window).height();  
    //获取屏幕宽高  
    var scollTop = $(document).scrollTop();  
    //当前窗口距离页面顶部的距离  
    var objLeft = (screenWidth - obj.width()) / 2;  
    ///弹出框距离左侧距离  
    var objTop = (screenHeigth - obj.height()) / 2 + scollTop;  
    ///弹出框距离顶部的距离  
    obj.css({  
        left:objLeft + "px",  
        top:objTop + "px"  
    });  
    obj.fadeIn(500);  
    //弹出框淡入  
    isOpen = 1;  
    //弹出框打开后这个变量置1 说明弹出框是打开装填  
    //当窗口大小发生改变时  
    $(window).resize(function() {  
        //只有isOpen状态下才执行  
        if (isOpen == 1) {  
            //重新获取数据  
            screenWidth = $(window).width();  
            screenHeigth = $(window).height();  
            var scollTop = $(document).scrollTop();  
            objLeft = (screenWidth - obj.width()) / 2;  
            var objTop = (screenHeigth - obj.height()) / 2 + scollTop;  
            obj.css({  
                left:objLeft + "px",  
                top:objTop + "px"  
            });  
            obj.fadeIn(500);  
        }  
});  
    //当滚动条发生改变的时候  
$(window).scroll(function() {  
    if (isOpen == 1) {  
        //重新获取数据  
        screenWidth = $(window).width();  
        screenHeigth = $(window).height();  
        var scollTop = $(document).scrollTop();  
        objLeft = (screenWidth - obj.width()) / 2;  
        var objTop = (screenHeigth - obj.height()) / 2 + scollTop;  
        obj.css({  
            left:objLeft + "px",  
            top:objTop + "px"  
        });  
        obj.fadeIn(500);  
    }  
});  
复制代码

二十六、css和js进行奇偶选择器

css

:nth-child(odd){background-color:#FFE4C4;}奇数行
:nth-child(even){background-color:#F0F0F0;}偶数行
复制代码

js

$("table  tr:nth-child(even)").css("background-color","#FFE4C4");    //设置偶数行的背景色
$("table  tr:nth-child(odd)").css("background-color","#F0F0F0");    //设置奇数行的背景色
复制代码

二十七、jQuery中live()使用报错，TypeError: $(...).live is not a function

jquery中的live()方法在jquery1.9及以上的版本中已被废弃了，如果使用，会抛出TypeError: $(...).live is not a function错误。

解决方法：

之前的用法：

.live(events， function)  

新方法：

.on(eventType, selector, function)

若selector不需要，可传入null


例子1：

之前：

$('#mainmenu a').live('click', function)

之后：

$('#mainmenu').on('click', 'a', function)


例子2：

之前：

$('.myButton').live('click', function)

之后(应使用距离myButton最近的节点)：

$('#parentElement').on('click', ‘.myButton’, function)

若不知最近的节点，可使用如下的方法：

$('body').on('click', ‘.myButton’, function)
复制代码

二十八、iframe滚动条问题

iframe嵌入的滚动条可以用iframe里面页面的大小覆盖掉iframe的滚动条
复制代码

二十九、点击图片下载（不用新窗口打开）

<a class="downs"  style="display:'+display+'" onclick="downimg(\''+list[i].skuTieTu+'\')">下载</a>
复制代码

js方法

/**
* 图片单独下载
*/
function downimg(skuTieTu){
    console.log(skuTieTu)
    let src = skuTieTu;
    var canvas = document.createElement('canvas');
    var img = document.createElement('img');
    img.onload = function(e) {
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0, img.width, img.height);
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    canvas.toBlob((blob)=>{
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'zzsp'; 
        link.click();  
    }, "image/jpeg");
}
img.setAttribute("crossOrigin",'Anonymous');
img.src = src;
复制代码

三十、ajax里面条件判断

$.ajax({
    type: "post",
    data: 
    contentType:
    url: 
    beforeSend: function () {
        if(){
        
        }else{
        
        };
    },
    success: function (data) {
        alert("保存失败");
    },
    error: function (data) {
        alert("保存成功");
    }
});
复制代码

三十一、ajax里面在数据请求之前加layui.load()时，请求状态必须是异步的才行（ async: true）

$.ajax({
    type:"post",
    url: API,
    data: {
        'a':'project.kujiale.plan.YongliaoUser'
    },
    dataType: "json",
    async: true,
    beforeSend: function () {
        layer.load(1);
    },
    success: function(data) {   
        var item =data.data;
        list = item
        if(data.code==0){
            layer.closeAll();
            var url = '/module/designplan/searchplan/searchlist.jsp';
            layer.open({
            type: 2,
            title: "搜索方案",
            shadeClose: true,
            shade: 0.8,
            area: ['700px','500px'],
            content: [url]
            });
        }else{
            layer.msg(data.msg);
        }
    }
});

复制代码

三十二、js根据元素的属性获取到改元素其他属性的值

jquery
$("a[id=search]").attr("data-search")

原生js
document.querySelector("a[id=search]").getAttribute("data-search") //根据当前元素的属性获取该元素其他属性的值

document.querySelector("a[id=search]").text //根据当前属性获取该元素的值
document.querySelector("a[id=search]").innerText //根据当前属性获取该元素的值    
复制代码

三十三、数组对象提交时转化问题

JSON.stringify(userList)
复制代码

三十四、layui使用

1、关闭弹窗

layer.msg('分配成功',{time: 1000},function () {
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
}）
复制代码

2、关闭弹窗，刷新页面

window.location.reload();//刷新当前页面
window.parent.location.reload();//刷新父级页面
复制代码

三十五、js创建下载方式

download(data.data);

function downpdf(data){
    var link = document.createElement('a');
    link.href = data;
    link.target = '_blank';
    link.click();
    delete link;
}
复制代码

三十六、高阶函数

const isYoung = age => age < 25;

const message = msg => "He is "+ msg;

function isPersonOld(age, isYoung, message) {
    const returnMessage = isYoung(age)?message("young"):message("old");
    return returnMessage;
}

// passing functions as an arguments
    console.log(isPersonOld(13,isYoung,message))
// He is young
复制代码

递归

递归是一种函数在满足一定条件之前调用自身的技术。只要可能，最好使用递归而不是循环。你必须注意这一点，浏览器不能处理太多递归和抛出错误。
下面是一个演示递归的例子，在这个递归中，打印一个类似于楼梯的名称。我们也可以使用for循环，但只要可能，我们更喜欢递归。
复制代码
function printMyName(name, count) {
    if(count <= name.length) {
        console.log(name.substring(0,count));
        printMyName(name, ++count);
    }
}

console.log(printMyName("Bhargav", 1));

/*
    B
    Bh
    Bha
    Bhar
    Bharg
    Bharga
    Bhargav
*/

// withotu recursion
var name = "Bhargav"
var output = "";
for(let i=0; i<name.length; i++) {
    output = output + name[i];
    console.log(output);
}


作者：山水有轻音
链接：https://juejin.im/post/6873003814065012750

于Transform变形属性大家都不陌生吧，可以通过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等，你也许已经很熟悉了这些属性，或许你也会有这样的困惑，这些属性在实际项目中如何应用呢？

今天的文章，笔者不会详细一一介绍相关属性，默许大家已经很熟悉了，今天只做例子，聊聊这些属性在实际项目中的应用。

本篇文章笔者将带着大家完成以下几个例子：

  • 内容垂直居中
  • 对话框气泡
  • 弹跳的小球
  • 转动的线圈（SVG）
  • 翻转的卡片

本篇文章预计15分钟

内容垂直居中

在前端开发过程中，内容居中是常见的需求。其中，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin:0 auto 就可以实现。但是垂直居中相对来说是比较复杂一些的。实现的方法也比较多，比如flex布局，display:table等方法，今天笔者将通过使用Transform属性进行实现。

基本的页面布局和样式

为了方便大家理解，我们先布局两个基本的文本框内容，html代码如下：

<div class="parent">
 <div class="child">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
 </div>
</div>
<div class="parent">
 <div class="child">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
 </div>
</div>

上述代码并不复杂，我们定义了两段内容长度不同的文本。接下来让我们为文本内容定义宽度，高度和边框，让我们更加直观展示文本内容在展示区域的位置，其css部分代码如下：

.parent {
 height: 300px;
 width: 600px;
 padding: 0 1em;
 margin: 1em;
 border: 1px solid red;
}
.child {
 font-size: 1.2rem;
}

加上CSS代码后，我们完成了基本的页面布局和样式，页面的效果如下图：

使其垂直居中

接下来我们来实现文本垂直居中，有的同学可能想到了使用top属性，实现文本的垂直居中，代码可能是这样的：

.child {
 font-size: 1.2rem;
 position: relative;
 top: 50%;
}

运行后，页面的实际效果和我们预想不一致，如下图所示：

从上面的图中可以看出，文本框的实际效果，文本内容的内容并不是在中间而是在下半部分，并不是我们预想的垂直居中，你也许在想，如果我们把文本内容在往上提一半，正好能满足垂直居中的需求，Transform属性中正好有个平移的属性translate(x,y)，我们可以使用Transform让元素在y轴方向移动，样式代码修改如下：

.child {
 font-size: 1.2rem;
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

正如我们所想，我们实现了内容的垂直居中，完成的效果如下：

细心的同学会注意到，元素的中心位置是在“半像素”这条线上，有可能显得模糊，我们可以添加perspective（视域）属性，让其更清楚，如下代码所示：

.child {
 // ...
 transform: perspective(1px) translateY(-50%);
}

最终的代码

经过上面的步骤，我们最终完成了内容的垂直居中，最终的效果如下：

以下是最终的css代码，是不是很简单：

.parent {
 height: 300px;
 width: 600px;
 padding: 0 1em;
 margin: 1em;
 border: 1px solid red;
}
.child {
 font-size: 1.2rem;
 position: relative;
 top: 50%;
 transform: perspective(1px) translateY(-50%);
}

对话框气泡

微信想必大家天天用，我们是否注意到聊天界面里文本对话框气泡，右边或左边会凸出个小箭头指向聊天人的头像，这个例子就要实现类似微信对话框的气泡。

创建基本的页面布局

首先我们先创建一个基本的布局，代码如下：

html部分

<div class="box">
 <div class="box-content">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
 </div>
</div>

css部分

html {
 font-size: 16px;
}
.box {
 width: 10rem;
 background-color: #e0e0e0;
 padding: 1rem;
 margin: 1rem;
 border-radius: 1rem;
}

完成以后，我们的页面效果如下：

添加气泡箭头

接下来我们来实现右箭头的气泡效果，贴着文本框我们在右边放置个空文本框，我们使用css的为元素属性 ::before 来实现，样式代码如下：

.box::before {
 content: '';
 width: 1rem;
 height: 1rem;
 background-color: #e0e0e0;
 overflow: hidden;
}

注：上述宽和高的属性，如果值越大，气泡的箭头就越大。

这个宽高1rem的正方形无内容的文本还在文本框内，我们还无法看到，我们需要将这个文本框右对齐，使其的一半内容露在外边，修改后的css代码如下：

.box {
 // ...
 position: relative;
}
.box::before {
 // ...
 position: absolute;
 right: -0.5rem;
}

完后的效果，我们的页面效果是这样的：

气泡箭头应该在内容中间区域的位置，接下来，移动这个小方块的位置，正好可以利用我们刚才学到垂直居中知识，css样式代码如下：

.box::before {
 // ...
 top: 50%;
 transform: translateY(-50%);
}

完成后的，这个小方块真的居中了，页面实际效果如下图所示：

从上图我们可以看出，为了实现向右小箭头三角的效果，我们只需要将方块旋转45度即可，修改后的css代码如下：

.box::before {
 // ...
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
}

最终完成的代码

好了，我们的气泡效果完成了，效果如下：

最终完成的css代码如下：

html {
 font-size: 20px;
}
.box {
 width: 10rem;
 background-color: #e0e0e0;
 padding: 1rem;
 margin: 1rem;
 border-radius: 1rem;
 position: relative;
}
.box::before {
 content: '';
 width: 1rem;
 height: 1rem;
 background-color: #e0e0e0;
 overflow: hidden;
 position: absolute;
 right: -0.5rem;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
}
.box-content {
 position: relative;
 z-index: 2;
}

弹跳的小球

接下来我们要完成一个常见的需求，比如我们通过API请求后台数据，上传图片等不能立返回结果，我们需要让用户在页面停留片刻，为了给用户良好的用户体验，我们一般都会有个正在加载中的动画进行提示，这个例子笔者将带着大家完成下面一个弹跳的小球，效果如下，是不是很酷：

首先我们先进行基本的静态布局

html部分：

<div class="loader"></div>

css部分：

.loader {
 border-radius: 50%;
 width: 50px;
 height: 50px;
 background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
}

这样我们就完成了一个具有颜色渐变的静态的紫色小球，效果如下：

接下来声明动画名

如何让这个静态的小球动起来呢，我们需要借助css的动画属性，我们来定义一个名为jump的无限循环动画，先快后慢，然后反方向执行一遍动画，1.5s循环一次，代码如下：

.loader {
 // ...
 animation: jump 1.5s ease-out infinite alternate;
}

然后完成动画的实现

怎么定义名为jump的动画？我们让小球在垂直方向移动，我们可以使用translateY进行移动小球：

@keyframes jump {
 from {
 transform: translateY(0px)
 }
 to {
 transform: translateY(-50px)
 }
}

为了让小球有弹跳的空间，我们需要将小球距离顶部50px，css代码修改如下：

.loader {
 margin-top: 50px;
}

继续完善动画效果

为了让动画效果更加有趣，我们可以让小球边旋转边上升，动画部分修改如下：

@keyframes jump {
 from {
 transform: translateY(0px) rotate(0deg)
 }
 to {
 transform: translateY(-50px) rotate(360deg)
 }
}

我们动画可以继续完善，让其更加自然，小球上升过程中，相对地面的观察者，弹的越高，就会感觉小球越小，接下来修改小球动画部分，使用scale属性来缩小球，代码如下：

@keyframes jump {
 from {
 transform: translateY(0px) rotate(0deg) scale(1,1);
 opacity: 1;
 }
 to {
 transform: translateY(-50px) rotate(360deg) scale(0.8,0.8);
 opacity: 0.8;
 }
}

最终完成的css代码

好了，这个效果我们就这样完成了，其完成后的css代码如下，是不是很简单？

.loader {
 margin-top: 50px;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 animation: jump 1.5s ease-out infinite alternate;
background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
}
@keyframes jump {
 from {
 transform: translateY(0px) rotate(0deg) scale(1,1);
 opacity: 1;
 }
 to {
 transform: translateY(-50px) rotate(360deg) scale(0.8,0.8);
 opacity: 0.8;
 }
}

转动的线圈（SVG）

这个例子，我们要实现一个更炫的加载提示器，这次我们要做的是基于SVG的动画效果，要理解这部分内容，你需要会svg相关的基础知识，具体的效果如下，感觉就像”头部“的那个东西在牵动线条转圈圈，是不是很酷：

首先进行基本的绘制

我们先用svg绘制一个基本的圈，示例的代码如下：

<svg class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <!-- 1 -->
 <circle class="path spinner-border" cx="33" cy="33" r="31" stroke="url(#gradient)"></circle> <!-- 2 -->
 <linearGradient id="gradient"> <!-- 3 -->
 <stop offset="50%" stop-color="#000" stop-opacity="1"></stop>
 <stop offset="65%" stop-color="#000" stop-opacity=".5"></stop>
 <stop offset="100%" stop-color="#000" stop-opacity="0"></stop>
 </linearGradient>
 <circle class="path spinner-dot" cx="37" cy="3" r="2"></circle> <!-- 4 -->
</svg>

上述代码我们完成了以下内容：

  • 我们定义了一个66×66的视口。
  • 我们定义了一个半径为31px的圆圈。
  • 对圆圈的填充我们使用了线性填充，分成了三段，实现了比较酷的渐变填充的线条效果。
  • 接下来我们在圆圈上添加了一个小圆，让用户感觉这个线圈是这个小圆点牵着转动。

接下来我们来定义css部分，将画布定义成180*180，示例代码如下：

.spinner {
 margin: 10px;
 width: 180px;
 height: 180px;
}

然后我们来定义线圈和实心的小圆的css属性：

.spinner-dot {
 stroke: #000;
 stroke-width: 1;
 fill: #000;
}
.spinner-border {
 fill: transparent;
 stroke-width: 2;
 width: 100%;
 height: 100%;
}
.path {
 stroke-dasharray: 170;
 stroke-dashoffset: 20;
}

上述代码有几个属性需要解释下：

  • fill: transparent 的效果就是让大圈圈的填充颜色为透明色，只是个圈圈的线条而已。
  • stroke-dasharray: 170 的意思就是绘制点线和虚线，其实我们显示的不是一个完整的圆圈，给人一种转成圆圈的线条感觉，其值代表线条的长度
  • stroke-dashoffset: 表示偏移绘制起点的距离，其值越大，我们的线条越短。
  • 通过stroke-dasharray，stroke-dashoffset这两个属性，让我们绘制了一个不完整的圆圈。

关于stroke-dasharray，stroke-dashoffset的介绍建议大家看张鑫旭老师的这篇博文《纯CSS实现帅气的SVG路径描边动画效果》 www.zhangxinxu.com/wordpress/2…

通过上述代码，我们静态的线圈绘制好了，效果如下所示：

定义动画，让线圈转动起来

让线圈动起来，其实就是让其一直选择360度而已，我们让其2秒转一圈，示例代码如下：

.spinner {
 // ...
 animation: rotate 2s linear infinite;
}
@keyframes rotate {
 to {
 transform: rotate(360deg);
 }
}

让牵动线圈运动的小实心圆更有趣，感觉就像一个牵动发动机的“头”，让其倾斜摆动，示例代码如下：

.spinner-dot {
 // ...
 animation: skew 2s linear infinite alternate;
}
@keyframes skew {
 from {
 transform: skewX(10deg)
 }
 to {
 transform: skewX(40deg)
 }
}

最终完成的代码

就这样我们实行了一个个酷酷的的，转动线圈的效果，完整的css代码如下：

.spinner {
 margin: 10px;
 animation: rotate 2s linear infinite;
 width: 180px;
 height: 180px;
}
.spinner-dot {
 stroke: #000;
 stroke-width: 1;
 fill: #000;
 animation: skew 2s linear infinite alternate;
}
.spinner-border {
 fill: transparent;
 stroke-width: 2;
 width: 100%;
 height: 100%;
}
.path {
 stroke-dasharray: 170;
 stroke-dashoffset: 20;
}
@keyframes rotate {
 to {
 transform: rotate(360deg);
 }
}
@keyframes skew {
 from {
 transform: skewX(10deg)
 }
 to {
 transform: skewX(40deg)
 }
}

翻转的卡片

这个动画效果也是我们常见的，类似一些网站的图片，我们鼠标悬停在上面，图片进行了翻转，就好像一个卡片，翻转到其背面，显示了背面的内容，实现后的效果如下所示：

静态页面布局

首先我们先完成图片卡片的基本布局，示例代码如下：

<section class="container">
 <figure class="photo">
 <img src="http://www.hmttv.cn/uploadfile/2024/0807/20240807030232233.jpg" class="front side">
 <figcaption class="back side">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 </figcaption>
 </figure>
 <figure class="photo">
 <img src="http://www.hmttv.cn/uploadfile/2024/0807/20240807030233410.jpg" class="front side">
 <figcaption class="back side">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 </figcaption>
 </figure>
 <figure class="photo">
 <img src="http://www.hmttv.cn/uploadfile/2024/0807/20240807030233774.jpg" class="front side">
 <figcaption class="back side">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 </figcaption>
 </figure>
</section>

上述代码我们有三张图片，并且我们定义了图片背面的文字内容。

接下来我们来定义容器的样式，让三张图片在页面居中：

.container {
 margin: 10px auto;
}

然后我们定义每张图片在容器中左浮动，排成一行，并定义图片的宽与高：

.photo {
 width: 22vw;
 height: 20vw;
 min-width: 130px;
 min-height: 100px;
 float: left;
 margin: 0 20px;
}

接着我们定义图片的填充方式为cover：

.photo img {
 object-fit: cover;
}

最后我们定义图片文字介绍的样式：

.side {
 width: 100%;
 height: 100%;
}

完成后的效果如下：

接着我们继续将文字介绍内容移到图片的顶部：

.photo {
 // ...
 position: relative;
}
.side {
 // ...
 position: absolute;
}

完成后的效果如下所示：

让文字到背面去

现在开始使用css的魔法属性，将图片放置到3D空间去，将其3d变换，给人一种透视的感觉，我们使用transform-style这个属性，示例代码如下：

.photo {
 // ...
 transform-style: preserve-3d;
}

然后修改side样式，定义文字内容为背面，且背面属性不可见，这里使用了css的backface-visibility属性：

.side {
 // ...
 backface-visibility: hidden;
}

然后定义back相关的样式，先让背面翻转过去，在y轴上旋转180度。

.back {
 transform: rotateY(180deg);
 text-align: center;
 background-color: #e0e0e0;
}

这样我们的文字描述部分在背面被隐藏了。

定义悬停动画

接下来，我们定义鼠标悬停翻转卡片的功能，示例代码如下：

.photo:hover {
 transform: rotateY(180deg);
}

为了让动画效果不这么生硬，我们需要增加过渡的动画属性，代码完善如下：

.photo {
 // ...
 transition: transform 1s ease-in-out;
}

最终完成后的代码

好了，最后一个例子我们也完成了，是不是很有趣，最终完整的css代码如下：

.container {
 margin: 10px auto;
}
.photo {
 width: 22vw;
 height: 20vw;
 min-width: 130px;
 min-height: 100px;
 float: left;
 margin: 0 20px;
 position: relative;
 transform-style: preserve-3d;
 transition: transform 1s ease-in-out;
}
.photo:hover {
 transform: rotateY(180deg);
}
.photo img {
 object-fit: cover;
}
.side {
 width: 100%;
 height: 100%;
 position: absolute;
 backface-visibility: hidden;
}
.back {
 transform: rotateY(180deg);
 text-align: center;
 background-color: #e0e0e0;
}

友情提醒

毫无疑问，CSS3为我们提供了强大的动画功能，甚至不需要任何JS我们就可以于创建有趣和美丽的动画效果。但是，重要的是要合理使用它们而不是滥用它们。请记住，您的网站是为用户而不是为自己服务的（在大多数情况下，无论如何）。因此，应该利用CSS动画为用户提供更好的用户体验，而不是耍酷。

小节

在本文中，我们已经了解了如何将CSS的Transforms变换属性运用到真实的项目中。通过本文，我们已经了解了如何在页面上垂直对齐元素，对话框气泡，弹跳和旋转的加载动画，以及如何实现翻转动画。当然，也许你学会了其中的技巧，但是创造炫酷的动画，唯一的瓶颈限制就是你的想象力。

更多精彩内容，请微信关注“前端达人”公众号！

用JavaScript实现页面滑动到指定位置加载动画。

若页面滚动到class名为group-pic的元素的位置时开始加载


  2. $(document).ready(function(){
  3. var a,b,c;
  4. a = $(window).height(); //浏览器窗口高度
  5. var group = $(".group-pic");
  6. $(window).scroll(function(){
  7. b = $(this).scrollTop(); //页面滚动的高度
  8. c = group.offset().top; //元素距离文档（document）顶部的高度
  9. if(a+b>c){
  10. ...
  11. }else{
  12. ...
  13. }
  14. });
  15. });

原理： 1.获取浏览器窗口的高度；

2.获取页面滚动的高度；

3.获取页面距离文档（document）顶部的高度

offset().top具体指的是距哪里的高度呢？

一些获宽高度的属性：

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;

网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

1.offsetTop : 当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft : 当前对象到其上级层左边的距离.

不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth : 当前对象的宽度.

与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值


在线咨询
上一篇：如何用一行代码实现网页变灰效果？
下一篇：使用JS开发简单的音乐播放器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 三亚 洛浦县 西充县 红古区 黑水县 洪江市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服