整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
有時候，我們想閱讀頁面中某段精彩的內(nèi)容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩 ，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法 實現(xiàn)點擊某段文字或者圖片跳轉(zhuǎn)到頁面指定位置，方便用戶的閱讀。
這里作為錨點的標簽可以是任意元素。
<a href="#aa">跳轉(zhuǎn)到 id 為 aa 標記的錨點</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點的標簽只能是 a 標簽。
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<div id="abb">bbb</div>
注意：當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現(xiàn)（即以 name 為錨點和以 id 為錨點名字相同時），會將后者作為錨點。
window.scrollTo 滾動到文檔中的某個坐標。可提供滑動效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。
話不多說，看下面代碼
「html 部分」:
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點
let bridge = toEl;
let body = document.body;
let height = 0;
// 計算該 DOM 節(jié)點到 body 頂部距離
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滾動到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。
下面也直接上代碼
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意：此功能某些瀏覽器尚在開發(fā)中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應(yīng)的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
下面為了方便看效果，把上面的代碼整理在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa">跳轉(zhuǎn)到以 id 為 aa 標記的錨點 a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<p>-------------分隔線-------------</p>
<div>bb</div>
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">dd</div>
<p>-------------分隔線-------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele為指定跳轉(zhuǎn)到該位置的DOM節(jié)點
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
</script>
</html>
效果圖：
動距離
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。
根節(jié)點
有兩種特殊的文檔屬性可用來訪問根節(jié)點：
document.documentElement chome object HTMLHtmlElement
document.body IE、FF object HTMLBodyElement
第一個屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(html標記)。
第二個屬性是對HTML頁面的特殊擴展,提供了對<body>標簽的直接訪問(body標記)。
窗口尺寸、工作區(qū)尺寸
可視區(qū)尺寸寬度
document.body.clientWidth IE、FF
document.documentElement.clientWidth chome
兼容性寫法：
document.documentElement.clientWidth || document.body.clientWidth;可視區(qū)尺寸高度
document.body.clientHeight IE、FF
document.documentElement.clientHeight chome
兼容性寫法：
document.documentElement.clientHeight || document.body.clientHeight;獲取瀏覽器窗口水平滾動條的位置
document.body.scrollLeft;
document.documentElement.scrollLeft
兼容性寫法：
document.documentElement.scrollLeft || document.body.scrollLeft;獲取瀏覽器窗口垂直滾動條的位置
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法：
document.documentElement.scrollTop || document.body.scrollTop;注意：IE、FF已經(jīng)支持documentElement對象的各種屬性, 而
以上兼容性寫法不影響所獲的屬性值
編寫自定義函數(shù)：
// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
}// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}// 獲取瀏覽器窗口水平滾動條的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}// 獲取瀏覽器窗口垂直滾動條的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}<!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響
寫CSS的常用套路（下篇）...
點擊觀看——我寫CSS的常用套路（上篇）...
為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會使陰影更加絲滑
本demo地址：Pagination
注意到box-shadow還有個inset，用于盒子內(nèi)部發(fā)光
利用這個特性我們可以在盒子內(nèi)部的某個范圍內(nèi)設(shè)定顏色，做出一個新月形
再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！
注意到它散發(fā)著淡淡的紅光，其實就是2個偽元素應(yīng)用了模糊濾鏡所產(chǎn)生的效果
本demo地址：Crimson Crescent Loading
文本陰影，本質(zhì)上和box-shadow相同，只不過是相對于文本而言，常用于文本發(fā)光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果
本demo地址：Staggered GlowIn Text
本demo地址：Neon Text
本demo地址：Staggered Bouncing 3D Loading
能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本
本demo地址：Menu Hover Fill Text
漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光
線性漸變是筆者最常用的漸變
這個作品用到了HTML的dialog標簽，線性漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)
本demo地址：Confirm Modal
徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個橢圓形的徑向漸變
此外，由于背景可以疊加，我們可以疊加多個不同位置大小的徑向漸變來生成圓點群，再加上動畫就產(chǎn)生了一種微粒效果，無需多余的div元素
本demo地址：Particle Button
圓錐漸變可以用于制作餅圖
用一個偽元素疊在餅圖上面，并將content設(shè)為某個值（這個值通過CSS變量計算出來），就能制作出度量計的效果，障眼法又一次完成了它的使命
本demo地址：Gauge (No SVG)
PS里的濾鏡，blur最常用
當blur濾鏡和contrast濾鏡一起使用時，會產(chǎn)生一種融合（gooey）的奇特效果
本demo地址：Snow Scratch
對背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果
本demo地址：Frosted Glass
PS里的混合模式，常用于文本在背景下的特殊效果
以下利用濾色模式（screen）實現(xiàn)文本視頻蒙版效果
本demo地址：Video Mask Text
PS里的裁切，可以制作各種不規(guī)則形狀。如果和動畫結(jié)合也會相當有意思
本demo地址：Name Card Hover Expand
由于clip-path有裁切功能，因此可以將多個文字疊在一起，并按比例裁切成多分，再應(yīng)用交錯動畫，就能制作出酷炫的故障效果（glitch）。
本demo地址：Cross Bar Glitch Text
PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分
雖然clip-path能裁切出形狀，但它無法鏤空，因為形狀的里面它管不著
可能有人（包括我）會用偽元素來“模擬”鏤空（通過設(shè)置同樣的背景色），但這樣并非真的鏤空，換了個背景或浮在圖片上就會暴露出來，這時我們就要求助于遮罩了
假設(shè)，你想制作一個空心的圓環(huán)，那么你只需將一個徑向漸變作為元素的遮罩，并且第一個color-stop設(shè)置為透明，其他的color-stop設(shè)置為其他顏色即可，因為遮罩的定義就是只顯示遮罩圖片非透明的部分
注意：為了消除鋸齒，這個徑向漸變的中間需要有一個額外的color-stop用于緩沖，長度設(shè)置為原長度加0.5px即可
本demo地址：Circle Arrow Nav
投影效果，不怎么常用，適合立體感強的作品
本demo地址：Card Flip Reflection
雖然這并不是一個CSS特性，但是它經(jīng)常用于完成那些CSS所做不到的事情
那么何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了
目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行
通過查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置
既然能夠獲取鼠標的位置，那么跟蹤鼠標的位置也就不是什么難事了：通過監(jiān)聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，并用此坐標來當作鼠標的位移距離，監(jiān)聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此坐標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現(xiàn)了
本demo地址：Menu Hover Image
CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能
目前來說，我們無法直接給漸變添加動畫，因為瀏覽器不理解要改變的值是什么類型
這時，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對顏色應(yīng)用插值方法來進行動畫
還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變?yōu)?00%，餅圖就會順時針旋轉(zhuǎn)出現(xiàn)
利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設(shè)置不同的顏色，應(yīng)用交錯動畫，就有了下面這個炫麗的效果
本demo地址：Mawaru
將交錯動畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風(fēng)格的菜單
本demo地址：Shinchou Menu
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
