移動端佈局 小記

 

vue 作 左側菜單欄，wrapper 爲父級，彈出時顯示並從左側作滑入動畫，transform: translateX(-250px); 漸隱漸現。子級左右佈局左側60%，右側40%，點擊滑出菜單且隱藏

.fadeIn-enter-active {
  transition: all .4s ease;
}
.fadeIn-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fadeIn-enter, .fadeIn-leave-active {
  transform: translateX(-250px);
  opacity: 0;
}

 

給a標籤hover效果 添加 下劃線 過渡動畫

a {
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #3F51B5;
  transform: scaleX(0);
  transition: .3s ease-in-out;
}
a:hover::after {
  transform: scaleX(1);
  transition: .3s ease-in-out;
}

 

移動端 a:active 方法，點擊有顏色

a:active{background:#f5f5f5}

 

console.log 打印自定義樣式字體 （彩色字體）

console.log("%c hello world","background-image:-webkit-gradient( linear, left top,right top, color-stop(0, #00a419),color-stop(0.15, #f44336), color-stop(0.29, #ff4300),color-stop(0.3, #AA00FF),color-stop(0.4, #8BC34A), color-stop(0.45, #607D8B),color-stop(0.6, #4096EE), color-stop(0.75, #D50000),color-stop(0.9, #4096EE), color-stop(1, #FF1A00));color:transparent;-webkit-background-clip:text;font-size:18px;");

 

禁止蒙層底部頁面跟隨滾動

彈窗層滾動頁面也跟隨滾動，若是彈窗的內容也能夠滾動的話，蒙層底部的頁面會開始滾動，所以須要阻止這種行爲。

適用pc端，打開彈窗時，給body添加樣式，關閉彈窗時移除樣式便可

overflow: hidden;
height: 100%;

 

兼容移動端彈窗方案

彈窗時將body 設置成fixed，彈窗關閉再還原，有一些細節要考慮，將頁面固定視窗後，內容會回頭最頂端，這裏咱們須要記錄一下，同步top值。

 

let bodyEl = document.body
let top = 0

function stopBodyScroll (isFixed) {
  if (isFixed) {
    top = window.scrollY

    bodyEl.style.position = 'fixed'
    bodyEl.style.top = -top + 'px'
  } else {
    bodyEl.style.position = ''
    bodyEl.style.top = ''

    window.scrollTo(0, top) // 回到原先的top
  }
}

// 調用
stopBodyScroll (true)

 

 js 小數點轉百分比

/**
*這裏須要先用Number進行數據類型轉換，而後去指定截取轉換後的小數點後幾位(按照四捨五入)，這裏是截取一位，0.1266轉換後會變成12.7%
*/
function toPercent(point){
    var str=Number(point*100).toFixed(1);
    str+="%";
    return str;
}

百分比轉小數

function toPoint(percent){
    var str=percent.replace("%","");
    str= str/100;
    return str;
}

 

css 文字一行顯示 

.text{
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
    word-break:keep-all;
}

css 文字兩行顯示，多行顯示

.line2,.line3,.line4{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.line2{
    -webkit-line-clamp: 2;
}
.line3{
    -webkit-line-clamp: 3;
}
.line4{
    -webkit-line-clamp: 4;
}

 

記兩個js 數組算法

判斷一個元素是否在數組中

function contains(arr, obj) {
  var i = arr.length;
  while (i--) {
    if (arr[i] === obj) {
      return true;
    }
  }
  return false;
}

var arr = new Array(1, 2, 3);
contains(arr, 2);//返回true
contains(arr, 4);//返回false

從數組中刪除指定元素

function removeByValue(arr, val) {
  for(var i=0; i<arr.length; i++) {
    if(arr[i] == val) {
      arr.splice(i, 1);
      break;
    }
  }
}

var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
// ["mon","wed", "thur"]

 

 獲取audio 的 currentTime（當前時長） 或者  duration （總時長）格式化成 分秒時間格式

timerFomart (time) {
    if (isNaN(time)) return '00:00'
    let min = time / 60 > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60)
    let miao = time % 60 > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60)
    return min + ':' + miao
}

// 03:30

 

按鈕上下模糊

 

.btn-parent {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 22%;
    background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 3%, #FFFFFF 46%)
}

 

 css實現一個div 三道槓

.line-tri{width: 8px;height: 1px;padding: 2px 0;border-top: 1px solid #fff;border-bottom: 1px solid #fff;background-color: #fff;background-clip: content-box;display: inline-block;vertical-align: middle;}

 

css 卡片堆疊的效果

 

.div{
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 
    0 8px 0 -3px #f6f6f6, 
    0 9px 1px -3px rgba(0, 0, 0, 0.2),
    0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}


<div class="div">
    <img src="1.png" alt="">
</div>