CSS和JS部分知識(shí)點(diǎn)的運(yùn)用(小A一輪)

目錄

• CSS和JS部分知識(shí)點(diǎn)的運(yùn)用(小A一輪)
• • 首頁
  • • 首頁大標(biāo)題藍(lán)色邊框動(dòng)畫的實(shí)現(xiàn)
    • 頭部導(dǎo)航條黃色塊的實(shí)現(xiàn)
    • 第三個(gè)英文標(biāo)題透明字體的實(shí)現(xiàn)
  • 通過偽元素修飾各個(gè)標(biāo)題
  • • 右側(cè)導(dǎo)航條
    • 右側(cè)導(dǎo)航欄的樣式實(shí)現(xiàn)
    • 右側(cè)導(dǎo)航欄展開內(nèi)容的動(dòng)畫實(shí)現(xiàn)
    • 右側(cè)導(dǎo)航欄圖標(biāo)字體的引用
    • 右側(cè)導(dǎo)航欄自動(dòng)滾輪動(dòng)畫的js實(shí)現(xiàn)
  • 輪播圖
  • • 輪播圖的彈性容器設(shè)置
    • 輪播圖無限自動(dòng)輪播的js實(shí)現(xiàn)
    • 輪播點(diǎn)隨著輪播圖切換的js實(shí)現(xiàn)
    • 輪播點(diǎn)點(diǎn)擊時(shí)的被選中的js實(shí)現(xiàn)
  • 圈圈動(dòng)畫效果的實(shí)現(xiàn)
  • 公用樣式中的設(shè)置
  • 關(guān)于固定定位與粘滯定位與視距的一個(gè)問題

首頁

首頁大標(biāo)題藍(lán)色邊框動(dòng)畫的實(shí)現(xiàn)

• 關(guān)于運(yùn)動(dòng)元素的設(shè)置
  • 設(shè)置四個(gè)小點(diǎn)于同一位置
  • 為防止小點(diǎn)受其他的影響，應(yīng)用絕對(duì)定位

/* 4個(gè)點(diǎn)的樣式 */ .bule-hoop1 {position: absolute;width: 5px;height: 5px;bottom: 160px;right: -10px;background-color: #0f9cf5;animation: blue1 4s 1s infinite linear; }

• 關(guān)于動(dòng)畫效果
  • 運(yùn)動(dòng)從點(diǎn)到線又到點(diǎn)，在一個(gè)矩形中應(yīng)分為8個(gè)時(shí)期
    • 0~12.5%：向左寬度增加以變成線
    • 12.5%~25%：向右往左縮減寬度并變成左下角的點(diǎn)
    • 25~37.5%：向上增加高度變成線
    • 37.5~50%:從下往上減小高度變成左上角的點(diǎn)
    • 后面也是這個(gè)規(guī)律
  • 根據(jù)一個(gè)點(diǎn)運(yùn)動(dòng)一圈為4s，給后面每個(gè)點(diǎn)都延遲1s，制作良好的效果

@keyframes blue1 {from {bottom: 160px;}12.5% {right: -10px;bottom: 160px;width: 640px;height: 5px;}25% {/* 變成點(diǎn)定在左下教 */right: 630px;width: 5px;height: 5px;}37.5% {right: 630px;bottom: 160px;width: 5px;height: 90px;}50% {right: 630px;bottom: 245px;width: 5px;height: 5px;}62.5% {bottom: 245px;right: -10px;width: 640px;height: 5px;}75% {right: -10px;bottom: 245px;width: 5px;height: 5px;}87.5% {bottom: 160px;width: 5px;height: 90px;}100% {bottom: 160px;right: -10px;} }

頭部導(dǎo)航條黃色塊的實(shí)現(xiàn)

• 通過給每個(gè)選項(xiàng)設(shè)置偽元素來實(shí)現(xiàn)
• 脫離文檔流防止影響布局，通過visibility來隱藏

/* 通過偽元素設(shè)置選項(xiàng)中的黃色下底線 */ .top-bar a::after {position: absolute;bottom: 0;left: 0;right: 0;margin: auto;content: "";height: 6px;background-color: #ffd155;visibility: hidden;transition: .3s; }/* 設(shè)置點(diǎn)擊頂部選項(xiàng)時(shí)的效果 */ .top-bar a:hover::after {width:80%;visibility: visible; } .top-bar a:hover li {color: #0f9cf5;font-weight: bold; }

第三個(gè)英文標(biāo)題透明字體的實(shí)現(xiàn)

• 通過-webkit-text-stroke 來鏤空字體并加自定義顏色的邊框

li.banner-font3 {margin-bottom: 20px;margin-left: 15px;z-index: 2;font-size: 40px;font-family: "Franklin Gothic Medium";-webkit-text-stroke: 1px black;/* 鏤空字體 */color: white; }

通過偽元素修飾各個(gè)標(biāo)題

• ::after 和 ::before設(shè)置absolute脫離文檔流，不占據(jù)位置，然后來實(shí)現(xiàn)效果

右側(cè)導(dǎo)航條

右側(cè)導(dǎo)航欄的樣式實(shí)現(xiàn)

• 設(shè)置導(dǎo)航欄的位置容器為固定定位，并居中
• 為了防止縮放頁面導(dǎo)致看不見或不位于期望的位置
  • 采取tranlateX的方式來實(shí)現(xiàn)水平位置的確定

.nav-wrapper {position: fixed;left: 0;right: 0;margin: auto;transform: translateX(836%);top: 250px;width: 80px;height: 400px;z-index: 999; }

• 設(shè)置彈性盒來裝元素
  • 通過通過空白區(qū)的布局屬性來調(diào)整各個(gè)選項(xiàng)之間的位置

.navbox {display: flex;flex-direction: column;justify-content: space-around;align-items: flex-start;width: 61px;height: 440px; }

右側(cè)導(dǎo)航欄展開內(nèi)容的動(dòng)畫實(shí)現(xiàn)

• 每個(gè)選項(xiàng)后加一個(gè)div來存文字內(nèi)容
• 動(dòng)畫的實(shí)現(xiàn)是通過從0拉長寬度來實(shí)現(xiàn)的
• 設(shè)置選中的選項(xiàng)取消透明來突出效果

.nav-content {text-align: center;height: 50px;width: 0px;margin-left: -30px;background-color: #0f9cf5;color: white;line-height: 50px;border-radius: 0px 50px 50px 0px;font-size: 16px;transition: 0.4s;opacity: 0; } .navbox li:hover .nav-content {width: 140px;opacity: 1; }

右側(cè)導(dǎo)航欄圖標(biāo)字體的引用

• 引入了font-awesome的圖標(biāo)字體庫
• 通過設(shè)置i標(biāo)簽，在zeal中查詢類名來實(shí)現(xiàn)

右側(cè)導(dǎo)航欄自動(dòng)滾輪動(dòng)畫的js實(shí)現(xiàn)

• 用標(biāo)簽名獲取元素
• 因?yàn)檫@里不太復(fù)雜，所以一個(gè)事件綁定一個(gè)處理程序
• 所以這里用了ele.onclick = function(){ }，沒有用obj.addEventListener(type,fn,false)
• 里面存放了一個(gè)定時(shí)器
  • 用于設(shè)置點(diǎn)擊選項(xiàng)之后自動(dòng)滾動(dòng)

var li = document.getElementsByClassName("navli"); var u = parseInt(window.pageYOffset); li[6].onclick = function(){var time6 = setInterval(function(){scrollBy(0,50);u++;if(parseInt(window.pageYOffset) > 7800) {clearInterval(time6);}},1) }

輪播圖

輪播圖的彈性容器設(shè)置

• 思想：設(shè)置recycle-box一個(gè)容納所有要輪播的組，六個(gè)組的話設(shè)置七組的長度，因?yàn)榈谄呓M圖要與第一組相同實(shí)現(xiàn)不斷輪播
• 對(duì)于每組之間的間隔，七組有六個(gè)間隔，如果想設(shè)置每兩組之間100px的間隔
  • 滿足以下公式recycle-box的寬度=每個(gè)輪播組的寬度*7 + 100px * 6，然后利用justify-content來實(shí)現(xiàn)彈性盒中空白的分配

.recycle-box {width: 9000px;position: relative;display: flex;justify-content: space-between; }

輪播圖無限自動(dòng)輪播的js實(shí)現(xiàn)

• 設(shè)置定時(shí)器，讓recycle-box的margin-x從"0"到 “-(每個(gè)輪播組的寬度1200+間隔100)*6px”
• 設(shè)置變量i來實(shí)現(xiàn)數(shù)值上的遞增，當(dāng)i為7801時(shí)，再重新設(shè)置margin-x為“0”

var timer1 = setInterval(function () {loop1.style.marginLeft = -i + "px";i += 1; if(i>1 && i< 1200){act1(0);}if(i > 1200 && i<2500){act1(1);}if(i > 2500 && i<3800){act1(2);}if(i > 3800 && i<5100){act1(3);}if(i > 5100 && i<6400){act1(4);}if(i > 6400 && i<7700){act1(5);} // 很不情愿的寫法，因?yàn)橛胹wtich對(duì)某個(gè)點(diǎn)的話，會(huì)有隨機(jī)性if (i == 7801) {// clearInterval(1);loop1.style.marginLeft = "0";i = 1;}

注意：中間的act1函數(shù)是實(shí)現(xiàn)輪播點(diǎn)和輪播圖組同步的效果

輪播點(diǎn)隨著輪播圖切換的js實(shí)現(xiàn)

• 通過以有樣式的class組名的來設(shè)置輪播點(diǎn)效果，用for來遍歷每個(gè)點(diǎn)
• 這里的"actived"是一個(gè)class名，樣式是被點(diǎn)亮，q是每個(gè)點(diǎn)都有的(樣式是未點(diǎn)亮)

var act1 = function (s){for (var n = 0; n < 6; n++) {q[n].className = "q";}q[s].className = "q actived";}

輪播點(diǎn)點(diǎn)擊時(shí)的被選中的js實(shí)現(xiàn)

• 給每個(gè)輪播點(diǎn)設(shè)置click事件類型
• 用for遍歷，通過立即執(zhí)行函數(shù)實(shí)現(xiàn)給每個(gè)點(diǎn)綁定方法

for (var j = 0; j < 6; j++) {(function (k) {q[k].onclick = function () {loop1.style.transition = "1s";//增加切換時(shí)的過渡效果loop1.style.marginLeft = -1300 * k + "px";//切換到該點(diǎn)對(duì)應(yīng)的組圖clearInterval(timer1);act1(k);};})(j); }

圈圈動(dòng)畫效果的實(shí)現(xiàn)

• 彈性容器的尺寸變換與動(dòng)畫結(jié)合
  • 下面時(shí)“關(guān)于我們”欄的圈圈動(dòng)畫的代碼

div.pointer-wrapper {position: absolute;right: 0;bottom: 0px;display: flex;flex-direction: column-reverse;justify-content: space-around;width: 30px;height: 80px;font-size: 20px;animation: longer1 2s infinite alternate; } @keyframes longer1 {from {height: 80px;}to {height: 500px;} }

• 當(dāng)鼠標(biāo)移入矩形時(shí)，輪播圖懸浮的效果
  • 設(shè)置視距，結(jié)合transform:translateZ來實(shí)現(xiàn)懸浮的視距效果

div.pride-wrapper {position: relative;margin-top: 40px;height: 900px;background-image: url(../img/teamHonorbg.png);background-repeat: no-repeat;background-size: cover;perspective: 50px;/* 視距的設(shè)置 */ } /* 團(tuán)隊(duì)榮譽(yù)的外部容器，含背景 */.pride-box:hover li {border: #f0f0f0 2px solid;box-shadow: 5px 5px 30px #737373;transform: translateZ(1px); } /* 設(shè)置鼠標(biāo)在矩形內(nèi)選項(xiàng)卡會(huì)浮動(dòng) */

公用樣式中的設(shè)置

• 對(duì)于設(shè)計(jì)稿中的1200px，在每一個(gè)欄目都設(shè)置一個(gè)大容器，寬度是整個(gè)頁面的100%，里面放的是裝內(nèi)容的容器，利用這樣來實(shí)現(xiàn)水平居中，在它的class類名中增加w即可

.w {/* 給容器設(shè)置相對(duì)定位，方便子元素在容器內(nèi)進(jìn)行布局，不影響其他的容器 */position: relative;/* 設(shè)置容器居中 */margin: 0 auto;/* 設(shè)計(jì)稿中提到的安全距離 */width: 1200px;}

• 未防止高度塌陷的問題，同樣是設(shè)置一個(gè)公用樣式，需要只需要添加類名即可

.clearfix::before, .clearfix::after {content: "";display: table;clear: both; }

關(guān)于固定定位與粘滯定位與視距的一個(gè)問題

• 在制作右側(cè)導(dǎo)航欄的時(shí)候考慮到了這兩種定位
• 總結(jié):設(shè)置了粘滯定位的元素，是不脫離文檔流的，比如我在body下面加一個(gè)div，設(shè)置了粘滯定位，給它設(shè)置了寬高，則后面的所有內(nèi)容都會(huì)因?yàn)檫@個(gè)div的高度下移
  • 解決辦法：用一個(gè)大容器裝下面的所有內(nèi)容，增加一個(gè)margin-top = -div的高度
  • 另外，粘滯定位的兼容性一般
• 當(dāng)設(shè)置了固定定位，元素確實(shí)脫離了文檔流，但是一開始并沒有生效（即滾動(dòng)滾動(dòng)條元素并沒有相對(duì)視口固定）
  • 原因是給html設(shè)置視距

html{prespective : 100px; }

• 解決方法
  - 對(duì)于需要用到視距的元素，在它的父元素設(shè)置即可，這樣就不會(huì)影響到其他元素設(shè)置固定定位功能失效的效果

?

?

?

總結(jié)

以上是生活随笔為你收集整理的实战知识点(一)：CSS和JS部分知识点的运用(小A一轮)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。