整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
復制代碼.aa{
background-image: url(arrow.png)no-repeat right center;
background-image:url(nav-bar.jpg);
background-repeat:no-repeat;
background-position:right center;
}
復制代碼overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
復制代碼我自己是一名從事了多年開發(fā)的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');
})
復制代碼首先聲明一下:
<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; 總是顯示縱向滾動條
復制代碼.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="發(fā)布留言" class="subimt" onclick="display_alert()" style="cursor:pointer" />
復制代碼$("#test tbody").html("");
復制代碼var bv=$("#tabd tr").length-1;
$("#sp4").html(bv); //動態(tài)的獲取注數
復制代碼$(".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值,就會被發(fā)送進行下一步處理, radio組件的value屬性設置的值
無法從外觀上看出,所以必須在radio組件旁邊添加文字,此處的文字只是讓用戶了解此組件的意思.
4.checked
設置radio組件為已選擇,同一組radio組件的name性情值必須要相同
復制代碼1、<?php include("header.html");?>
2、使用ssi技術頁面生成shtml文件，只用在頭部文件位置加入<!--#include file="header.htm" -->，
然后修改的時候只要修改header.htm文件就可以了。使用shtml的好處是對搜索引擎比較友好，需要處理的文件在服務器端完成的，
不會加重訪問者的瀏覽器負擔。
復制代碼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
復制代碼能用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);
});
})；
復制代碼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>續(xù)保方案</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">商業(yè)險</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">商業(yè)主險</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">商業(yè)險</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();
})
復制代碼$(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事件,當鼠標點擊屏幕時觸發(fā)
startx = event.touches[0].clientX; //獲取當前點擊位置x坐標
starty = event.touches[0].clientY; //獲取當前點擊位置y坐標
$(".sdf").text("x:"+startx+",y:"+starty+"") //賦值到頁面顯示
} , false); //false參數,設置事件處理機制的優(yōu)先順序，具體不多說，true優(yōu)先false
obj.addEventListener('touchmove', function(event) { //touchmove事件,當鼠標在屏幕移動時觸發(fā)
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事件,當鼠標離開屏幕時觸發(fā)，項目中無用到，舉例
$(".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急速瀏覽器內核基于谷歌的
復制代碼button,input type=button按鈕在IE和w3c，firefox瀏覽器區(qū)別：
1、當在IE瀏覽器下面時，button標簽按鈕，input標簽type屬性為button的按鈕是一樣的功能，不會對表單進行任何操作。
2、但是在W3C瀏覽器，如Firefox下就需要注意了，button標簽按鈕會提交表單，而input標簽type屬性為button不會對表單進行任何操作。
為button按鈕增加一個type=”button”屬性。
復制代碼<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;
}
復制代碼$('#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頁面里的元素
復制代碼$('.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父級頁面元素
復制代碼$('.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 說明彈出框是打開裝填
//當窗口大小發(fā)生改變時
$(window).resize(function() {
//只有isOpen狀態(tài)下才執(zhí)行
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);
}
});
//當滾動條發(fā)生改變的時候
$(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
: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()方法在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最近的節(jié)點)：
$('#parentElement').on('click', ‘.myButton’, function)
若不知最近的節(jié)點，可使用如下的方法：
$('body').on('click', ‘.myButton’, function)
復制代碼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({
type: "post",
data:
contentType:
url:
beforeSend: function () {
if(){
}else{
};
},
success: function (data) {
alert("保存失敗");
},
error: function (data) {
alert("保存成功");
}
});
復制代碼$.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);
}
}
});
復制代碼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)
復制代碼layer.msg('分配成功',{time: 1000},function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}）
復制代碼window.location.reload();//刷新當前頁面
window.parent.location.reload();//刷新父級頁面
復制代碼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
復制代碼遞歸是一種函數在滿足一定條件之前調用自身的技術。只要可能，最好使用遞歸而不是循環(huán)。你必須注意這一點，瀏覽器不能處理太多遞歸和拋出錯誤。
下面是一個演示遞歸的例子，在這個遞歸中，打印一個類似于樓梯的名稱。我們也可以使用for循環(huán)，但只要可能，我們更喜歡遞歸。
復制代碼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)等，你也許已經很熟悉了這些屬性，或許你也會有這樣的困惑，這些屬性在實際項目中如何應用呢？
今天的文章，筆者不會詳細一一介紹相關屬性，默許大家已經很熟悉了，今天只做例子，聊聊這些屬性在實際項目中的應用。
本篇文章筆者將帶著大家完成以下幾個例子：
本篇文章預計15分鐘
在前端開發(fā)過程中，內容居中是常見的需求。其中，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設置元素的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>
上述代碼并不復雜，我們定義了兩段內容長度不同的文本。接下來讓我們?yōu)槲谋緝热荻x寬度，高度和邊框，讓我們更加直觀展示文本內容在展示區(qū)域的位置，其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%);
}
微信想必大家天天用，我們是否注意到聊天界面里文本對話框氣泡，右邊或左邊會凸出個小箭頭指向聊天人的頭像，這個例子就要實現類似微信對話框的氣泡。
創(chuàng)建基本的頁面布局
首先我們先創(chuàng)建一個基本的布局，代碼如下：
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;
}
完后的效果，我們的頁面效果是這樣的：
氣泡箭頭應該在內容中間區(qū)域的位置，接下來，移動這個小方塊的位置，正好可以利用我們剛才學到垂直居中知識，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請求后臺數據，上傳圖片等不能立返回結果，我們需要讓用戶在頁面停留片刻，為了給用戶良好的用戶體驗，我們一般都會有個正在加載中的動畫進行提示，這個例子筆者將帶著大家完成下面一個彈跳的小球，效果如下，是不是很酷：
首先我們先進行基本的靜態(tài)布局
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%);
}
這樣我們就完成了一個具有顏色漸變的靜態(tài)的紫色小球，效果如下：
接下來聲明動畫名
如何讓這個靜態(tài)的小球動起來呢，我們需要借助css的動畫屬性，我們來定義一個名為jump的無限循環(huán)動畫，先快后慢，然后反方向執(zhí)行一遍動畫，1.5s循環(huán)一次，代碼如下：
.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;
}
繼續(xù)完善動畫效果
為了讓動畫效果更加有趣，我們可以讓小球邊旋轉邊上升，動畫部分修改如下：
@keyframes jump {
from {
transform: translateY(0px) rotate(0deg)
}
to {
transform: translateY(-50px) rotate(360deg)
}
}
我們動畫可以繼續(xù)完善，讓其更加自然，小球上升過程中，相對地面的觀察者，彈的越高，就會感覺小球越小，接下來修改小球動畫部分，使用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 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>
上述代碼我們完成了以下內容：
接下來我們來定義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;
}
上述代碼有幾個屬性需要解釋下：
關于stroke-dasharray，stroke-dashoffset的介紹建議大家看張鑫旭老師的這篇博文《純CSS實現帥氣的SVG路徑描邊動畫效果》 www.zhangxinxu.com/wordpress/2…
通過上述代碼，我們靜態(tài)的線圈繪制好了，效果如下所示：
定義動畫，讓線圈轉動起來
讓線圈動起來，其實就是讓其一直選擇360度而已，我們讓其2秒轉一圈，示例代碼如下：
.spinner {
// ...
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
讓牽動線圈運動的小實心圓更有趣，感覺就像一個牽動發(fā)動機的“頭”，讓其傾斜擺動，示例代碼如下：
.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)
}
}
這個動畫效果也是我們常見的，類似一些網站的圖片，我們鼠標懸停在上面，圖片進行了翻轉，就好像一個卡片，翻轉到其背面，顯示了背面的內容，實現后的效果如下所示：
靜態(tài)頁面布局
首先我們先完成圖片卡片的基本布局，示例代碼如下：
<section class="container"> <figure class="photo"> <img src="http://www.jungjaehyung.com/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.jungjaehyung.com/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.jungjaehyung.com/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%;
}
完成后的效果如下：
接著我們繼續(xù)將文字介紹內容移到圖片的頂部：
.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我們就可以于創(chuàng)建有趣和美麗的動畫效果。但是，重要的是要合理使用它們而不是濫用它們。請記住，您的網站是為用戶而不是為自己服務的（在大多數情況下，無論如何）。因此，應該利用CSS動畫為用戶提供更好的用戶體驗，而不是耍酷。
在本文中，我們已經了解了如何將CSS的Transforms變換屬性運用到真實的項目中。通過本文，我們已經了解了如何在頁面上垂直對齊元素，對話框氣泡，彈跳和旋轉的加載動畫，以及如何實現翻轉動畫。當然，也許你學會了其中的技巧，但是創(chuàng)造炫酷的動畫，唯一的瓶頸限制就是你的想象力。
更多精彩內容，請微信關注“前端達人”公眾號！
用JavaScript實現頁面滑動到指定位置加載動畫。
若頁面滾動到class名為group-pic的元素的位置時開始加載
原理： 1.獲取瀏覽器窗口的高度；
2.獲取頁面滾動的高度；
3.獲取頁面距離文檔（document）頂部的高度
offset().top具體指的是距哪里的高度呢？
一些獲寬高度的屬性：
網頁可見區(qū)域寬： document.body.clientWidth;
網頁可見區(qū)域高： document.body.clientHeight;
網頁可見區(qū)域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區(qū)域高： 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;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：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屬性的區(qū)別在于:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.offsetHeight : 與style.height屬性的區(qū)別在于:如對象的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
