CSS和JS部分知識點的運用(小A一輪)

目錄

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

首頁

首頁大標題藍色邊框動畫的實現

• 關于運動元素的設置
  • 設置四個小點于同一位置
  • 為防止小點受其他的影響，應用絕對定位

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

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

@keyframes blue1 {from {bottom: 160px;}12.5% {right: -10px;bottom: 160px;width: 640px;height: 5px;}25% {/* 變成點定在左下教 */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;} }

頭部導航條黃色塊的實現

• 通過給每個選項設置偽元素來實現
• 脫離文檔流防止影響布局，通過visibility來隱藏

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

第三個英文標題透明字體的實現

• 通過-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; }

通過偽元素修飾各個標題

• ::after 和 ::before設置absolute脫離文檔流，不占據位置，然后來實現效果

右側導航條

右側導航欄的樣式實現

• 設置導航欄的位置容器為固定定位，并居中
• 為了防止縮放頁面導致看不見或不位于期望的位置
  • 采取tranlateX的方式來實現水平位置的確定

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

• 設置彈性盒來裝元素
  • 通過通過空白區的布局屬性來調整各個選項之間的位置

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

右側導航欄展開內容的動畫實現

• 每個選項后加一個div來存文字內容
• 動畫的實現是通過從0拉長寬度來實現的
• 設置選中的選項取消透明來突出效果

.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; }

右側導航欄圖標字體的引用

• 引入了font-awesome的圖標字體庫
• 通過設置i標簽，在zeal中查詢類名來實現

右側導航欄自動滾輪動畫的js實現

• 用標簽名獲取元素
• 因為這里不太復雜，所以一個事件綁定一個處理程序
• 所以這里用了ele.onclick = function(){ }，沒有用obj.addEventListener(type,fn,false)
• 里面存放了一個定時器
  • 用于設置點擊選項之后自動滾動

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) }

輪播圖

輪播圖的彈性容器設置

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

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

輪播圖無限自動輪播的js實現

• 設置定時器，讓recycle-box的margin-x從"0"到 “-(每個輪播組的寬度1200+間隔100)*6px”
• 設置變量i來實現數值上的遞增，當i為7801時，再重新設置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);} // 很不情愿的寫法，因為用swtich對某個點的話，會有隨機性if (i == 7801) {// clearInterval(1);loop1.style.marginLeft = "0";i = 1;}

注意：中間的act1函數是實現輪播點和輪播圖組同步的效果

輪播點隨著輪播圖切換的js實現

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

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

輪播點點擊時的被選中的js實現

• 給每個輪播點設置click事件類型
• 用for遍歷，通過立即執行函數實現給每個點綁定方法

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

圈圈動畫效果的實現

• 彈性容器的尺寸變換與動畫結合
  • 下面時“關于我們”欄的圈圈動畫的代碼

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;} }

• 當鼠標移入矩形時，輪播圖懸浮的效果
  • 設置視距，結合transform:translateZ來實現懸浮的視距效果

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;/* 視距的設置 */ } /* 團隊榮譽的外部容器，含背景 */.pride-box:hover li {border: #f0f0f0 2px solid;box-shadow: 5px 5px 30px #737373;transform: translateZ(1px); } /* 設置鼠標在矩形內選項卡會浮動 */

公用樣式中的設置

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

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

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

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

關于固定定位與粘滯定位與視距的一個問題

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

html{prespective : 100px; }

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

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。