-
querySelector() 方法僅僅返回匹配指定選擇器的第一個(gè)元素
e.target 是目標(biāo)對(duì)象,e.event是目標(biāo)所發(fā)生的事件。
查看全部 -
//Canvas繪制的總體步驟 //1.創(chuàng)建HTML頁面,設(shè)置畫布標(biāo)簽 ????<canvas?id="cvs"></canvas> //2.編寫js,獲取DOM對(duì)象 ????var?cvs?=?document.getElementById('cvs');?//畫布 //3.獲取2D上下文 ????var?ctx?=?cvs.getContext('2d');?//?畫筆 //4.設(shè)置繪制線樣式、顏色 ??ctx.fillStyle?=?"red"; ??ctx.strokeStyle?=?"red"; //5.繪制矩形,或者填充矩形(x,y,w,h) ??ctx.strokeRect(10,?10,?190,?100); ??ctx.fillRect(20,?10,?20,?20); ?? ??直線: ???ctx.moveTo(50,50); ???ctx.lineTo(200,200); ???ctx.stroke(); ??圓: ???cxt.beginPath();??? ???cxt.arc(50,50,40,2,Math.PI*2,true);???? ???cxt.closePath();??? ???cxt.stroke(); ??漸變: ???var?c=document.getElementById("myCanvas"); ???var?cxt=c.getContext("2d"); ???var?grd=cxt.createLinearGradient(0,0,175,50); ???grd.addColorStop(0,"#FF0000"); ???grd.addColorStop(1,"#00FF00"); ???cxt.fillStyle=grd; ???cxt.fillRect(0,0,175,50); ??圖像; ???var?c=document.getElementById("myCanvas"); ???var?cxt=c.getContext("2d"); ???var?img=new?Image() ???img.src="flower.png" ???cxt.drawImage(img,0,0);
查看全部 -
svg是基于XML標(biāo)記語言可縮放矢量圖形,支持無損縮放。
SVG的優(yōu)勢(shì):
文件體積小,能夠被大量的壓縮
圖片可以無限放大而不失真(矢量圖的基本特征)
在視網(wǎng)膜顯示屏上效果極佳
能夠?qū)崿F(xiàn)互動(dòng)和濾鏡效果
viewport是SVG圖像的可見區(qū)域,個(gè)SVG圖像理論上可以無限大,但是在同一時(shí)刻只有圖像的某些部分可以被看見。這個(gè)可見的區(qū)域就被稱為viewport。
在
<svg>
元素中使用width
和height
屬性來指定viewport的尺寸。<svg?width="100px"?height="50px"></svg>//單位可帶可不帶,默認(rèn)為px
詳情見:https://developer.mozilla.org/zh-CN/docs/Web/SVG
查看全部 -
https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
查看全部 -
?//1.傳建一個(gè)觀察者對(duì)象 ??var?observer=new?Observer(); ?//2.?通過subscribe方法,實(shí)現(xiàn)一個(gè)函數(shù)的觀察 ?observer.publish("任務(wù)名",處理函數(shù))? ?//3.?通過publish觸發(fā)觀察事件,在任意時(shí)刻觸發(fā)了這個(gè)觀察的任務(wù)名,將會(huì)觸發(fā)這個(gè)事件訂閱subscribe方法 ?observer.punlish("任務(wù)名") ?//4.?取消事件訂閱,意味著就不會(huì)執(zhí)行了 ?observer.unsubscribe("任務(wù)名")
查看全部 -
deferred對(duì)象是jQuery對(duì)Promises接口的實(shí)現(xiàn)
詳解見https://www.cnblogs.com/losesea/p/4415676.html
var?dtd=$Deferred();//創(chuàng)建 dtd.resolve();????//成功 dtd.then();??????????//執(zhí)行回調(diào)
查看全部 -
1.3D視圖: ????需要指定一個(gè)元素為容器并設(shè)置transform-style:preserve-3d,這樣它的后代元素也會(huì)有3D效果 ????(如果孫元素也有3D效果,還需給子元素設(shè)置preserve-3d) ????三維變形也可以用transform屬性來設(shè)置 ????可以呈現(xiàn)3D的屬性:translate3d、?scale3d???rotateX??rotateY??rotateZ
2.透視效果: ????perspective(length)?為一個(gè)元素設(shè)置三維透視的距離。僅作用于元素的后代,而不是其元素本身。
查看全部 -
1.background-size解決自適應(yīng)問題
2.運(yùn)動(dòng)=關(guān)鍵幀+坐標(biāo)變化(position+translate)
3.?transition-property:?width;(過渡的CSS屬性的名稱) ???transition-duration:?1s;(過渡效果花費(fèi)的時(shí)間。默認(rèn)是?0。) ???transition-timing-function:?linear;(過渡效果的時(shí)間曲線。默認(rèn)是?"ease"。) ???transition-delay:?2s;(過渡效果何時(shí)開始。默認(rèn)是?0。) ???簡(jiǎn)寫:$(".bird").transition({????'right':?"3rem",},?10000,'linear',function(){????alert("結(jié)束")});
查看全部 -
CSS3的animation的八個(gè)屬性: animation-name:動(dòng)畫名 animation-duration:時(shí)間 animation-delay:延時(shí) animation-iteration-count:次數(shù) animation-derection:方向 animation-play-state:控制 animation-fill-mode:狀態(tài) animation-timing-function:關(guān)鍵幀變化steps()函數(shù)
簡(jiǎn)寫animation:(name?duration?timing-function?iteration-count)
-moz-?支持火狐瀏覽器
-webkit-???支持Safari和chrome
-o-?支持Opera
查看全部 -
1.resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize' //用來監(jiān)聽當(dāng)然窗口的變化,一旦有變化就需要重新設(shè)置根字體的值 2.window.addEventListener(resizeEvt,?recalc,?false); document.addEventListener('DOMContentLoaded',?recalc,?false); //綁定瀏覽器縮放和加載時(shí)間 3.docEl.style.fontSize?=?20?*?(docEl.clientWidth?/?320)?+?'px'; //表示在不同屏幕尺寸下,設(shè)置不同的跟字體大小,比如在320的屏幕尺寸下,跟字體大小為16px. 4.16px=1rem
查看全部 -
:呈現(xiàn)3d效果需要3部分
?父元素或者當(dāng)前運(yùn)動(dòng)元素上設(shè)置透視角perspective,perspective屬性的值決定了3D效果的強(qiáng)度
3D視圖,設(shè)置在父元素上,子元素都可以相對(duì)與父元素的平面進(jìn)行3d變形操作
3D變形函數(shù),translate3d、scale3d、rotateX、rotateY、rotateZ等等
查看全部 -
animation-name :動(dòng)畫名 animation-duration:時(shí)間 animation-delay:延時(shí) animation-iteration-count:次數(shù) animation-direction:方向 animation-play-state:控制 animation-fill-mode:狀態(tài) animation-timing-function:關(guān)鍵幀變化查看全部
-
一、 技術(shù)點(diǎn)分解查看全部
-
知識(shí)點(diǎn)2查看全部
-
知識(shí)點(diǎn)1查看全部
舉報(bào)