css常見效果實現

一. CSS仿寫實心三角特效

<div class="triangle"></div>  // 實心倒三角
.triangle {
  margin: 15px 0 0 130px;  // 調整位置
  position: absolute;
  border: 10px solid white;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

二. Angular美化原生select的下拉選項樣式（空心下拉上拉箭頭）

<div  class="triangle"><div  [ngClass]="arrow && i == selectIndex?'inner-up':'inner-down'"></div></div>
<select  (blur)="selectBlur(i)"  (click)="selectClick(i)">
    <option  [value]="participant.id">{{name}}</option>
</select>

.triangle{ 
   position: absolute;  // 控制位置
   margin-left: 220px;
   margin-top: 10px;
  .inner-down {  //空心下拉箭頭
    width: 8px;
    height: 8px;
    border: 1px solid #CACFD2;
    border-width: 1px 1px 0 0;
    transform: rotate(135deg);
    margin-bottom: 10px;
    margin-top: -5px;
  }
  .inner-up {  //空心上拉箭頭
    width: 8px;
    height: 8px;
    border: 1px solid #CACFD2;
    border-width: 0 0 1px 1px;
    transform: rotate(135deg);
    margin-bottom: 10px;
  }
}

三. Angular - 仿video的拖拉滑動條

原生JavaScript寫法：js原生仿水平拖動軸

<div class="scroll" id="scroll">
    <div class="bar" id="bar"></div>
    <div class="mask" id="mask"></div>
</div>

.scroll {  //總進度條
  width: 70%;
  height: 5px;
  background: #d9e4e7;
  position: relative;
  margin-top: 15px;
  border-radius: 5px;
}
.bar {  //控制手柄圈圈
  width: 20px;
  height: 20px;
  background: #fff;
  position: absolute;
  top: -7px;
  left: 0;
  cursor: pointer;
  border-radius: 50%;
}
.mask {  //已走過的進度
  position: absolute;
  left: 0;
  top: 0;
  background: #3498db;
  width: 0;
  height: 5px;
  border-radius: 5px;
}

- angular6不能直接經過document對象去操做頁面對象！須要以angular特有的方式操做：
1. import { ElementRef } from '@angular/core'; 
2. constructor(
        public element: ElementRef
    ) { }
3. 經過  **this.element.nativeElement.querySelector('#scroll'); 操做對象！**

videoProgress() {
    const _that = this;
    const scroll = this.element.nativeElement.querySelector('#scroll');  // 總進度條
    const bar = this.element.nativeElement.querySelector('#bar');  //  鼠標按下時拖動的白色小圈圈
    const mask = this.element.nativeElement.querySelector('#mask'); // 已走過的藍色進度
    bar.onmousedown = function (event) {  // 鼠標按下小圈圈事件
        let barleft = 0;
        const leftVal = event.clientX - this.offsetLeft;
        document.onmousemove = function (event2) {  // 鼠標移動事件
            barleft = event2.clientX - leftVal;
            if (barleft < 0) {
                barleft = 0;
            } else if (barleft > scroll.offsetWidth - bar.offsetWidth) {
                barleft = scroll.offsetWidth - bar.offsetWidth;
            }
            mask.style.width = barleft + 'px';  // 設置已走過進度長度
            bar.style.left = barleft + 'px';  // 設置小圈圈距離起始位置的長度
            // 當前已播放的百分比
            _that.currentTime = (barleft / (scroll.offsetWidth - bar.offsetWidth)) * (_that.getPlayBackTotalTime); 

            // 解決若干操做下，例如：鼠標左鍵已經彈起時候，進度bar仍是會跟着鼠標來回滑動，出現相似hover效果的bug!
            if (window.getSelection) {
                if (window.getSelection().empty) {   // Chrome
                    window.getSelection().empty();
                } else if (window.getSelection().removeAllRanges) {   // Firefox
                    window.getSelection().removeAllRanges();
                }
            }
        }
        document.onmouseup = function () { // 彈起鼠標不作任何操做
            document.onmousemove = null;
        }
    }
}

四. 原生仿寫video播放器

<!-- 自定義controls -->
<div class="control-wrapper">
    <div class="v-pause-play-button">
        <img src="./image/video-stop.png" alt="" class="c-icon" id="videoControl">
    </div>
    <!-- 播放進度條 -->
    <div class="scroll" id="scroll">
        <div class="bar" id="bar"></div>
        <div class="mask" id="mask"></div>
    </div>
    <div class="c-time"><span id="c_time_info"></span>/<span id="t_time_info"></span></div>
    <div><img src="./image/voice.svg" alt="" class="c-icon"></div>
    <!-- 音量 -->
    <div class="scroll_voice" id="scroll_voice">
        <div class="bar_voice" id="bar_voice"></div>
        <div class="mask_voice" id="mask_voice"></div>
    </div>
</div>

.control-wrapper{
    user-select: none;
    height: 40px;
    line-height: 40px;
    width: 100%;
    background-color: #000;
    border: 1px solid gray;
    display: flex;
    justify-content: space-between;
}
/* 總進度條 */
.scroll { 
    width:75%;
    height: 6px;
    background: #d9e4e7;;
    position: relative;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 5px;
    z-index: 999;
}
/* 控制手柄圈圈 */
.bar { 
    width: 15px;
    height: 15px;
    background: #fff;
    position: absolute;
    top: -5px;
    left: 0;
    cursor: pointer;
    border-radius: 50%;
}
/* 已走過的進度 */
.mask {
    position: absolute;
    left: 0;
    top: 0;
    background: #3498db;
    width: 0;
    height: 6px;
    border-radius: 5px;
}
/* 音量進度條 */
.scroll_voice{
    width:100px;
    height: 6px;
    background: #d9e4e7;;
    position: relative;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 5px;
    z-index: 999;
    margin-right: 15px;
}
/* 控制手柄圈圈 */
.bar_voice { 
    width: 15px;
    height: 15px;
    background: #fff;
    position: absolute;
    top: -5px;
    left: 0;
    cursor: pointer;
    border-radius: 50%;
}
/* 已走過的進度 */
.mask_voice {
    position: absolute;
    left: 0;
    top: 0;
    background: #3498db;
    width: 0;
    height: 6px;
    border-radius: 5px;
}

// 播放控制進度條
function videoProgress() {
    let barleft = 0;
    bar.onmousedown = function (event) {
        var event = event || window.event;
        var leftVal = event.clientX - this.offsetLeft;

        $('body').on('mousemove', function () {
            var event = event || window.event;
            barleft = event.clientX - leftVal;
            if (barleft < 0) {
                barleft = 0;
            } else if (barleft > scroll.offsetWidth - bar.offsetWidth) {
                barleft = scroll.offsetWidth - bar.offsetWidth;
            }
            // 拖動進度條，更新進度條樣式，記錄拖動百分比 drag_playPercent
            drag_playPercent = parseInt(barleft / (scroll.offsetWidth - bar.offsetWidth) * 100);
            mask.style.width = drag_playPercent + '%';
            bar.style.left = drag_playPercent + "%";
        })
        $('body').on('mouseup', function () {
            
            $('body').off();   // 去掉全部的事件，解決快速拖拉時候偶現的 hover bug!
            ...
        })
    }
}


// 音量控制進度條
function videoVoiceProgress() {
    let barleft = 0;
    bar_voice.onmousedown = function (event) {
        var event = event || window.event;
        var leftVal = event.clientX - this.offsetLeft;

        $('body').on('mousemove', function (event) {
            var event = event || window.event;
            barleft = event.clientX - leftVal;
            if (barleft < 0) {
                barleft = 0;
            } else if (barleft > scroll_voice.offsetWidth - bar_voice.offsetWidth) {
                barleft = scroll_voice.offsetWidth - bar_voice.offsetWidth;
            }
            // 拖動進度條，更新進度條樣式，記錄拖動百分比
            drag_voice_playPercent = parseInt(barleft / (scroll_voice.offsetWidth - bar_voice.offsetWidth) * 100);
            mask_voice.style.width = drag_voice_playPercent + '%';
            bar_voice.style.left = drag_voice_playPercent + "%";
        })
        $('body').on('mouseup', function () {
            $('body').off();
            ...
        })
    }
}

五. Angular6 -- 實現列表拖拽和排序

• html5原生實現拖拽和排序

<div *ngFor="let item of printList;let i = index;"  (dragover)="dragover($event)" (drop)="drop($event, i)">
    <div  [draggable]="draggable"  (dragstart)="dragstart($event, i)"></div>
</div>

// 1. 設置被拖拽元素能夠拖放   --> 設置 【draggable】 屬性
// 2. 設置拖放的元素  --> 【ondragstart】事件中經過 dataTransfer.setData 設置拖放的元素
dragstart(ev: DragEvent, index) {
    ev.dataTransfer.setData('Text', index); //傳遞被拖放元素的索引index
}
// 3. 設置拖放的目的地  --> 被拖放到的目的地 須要在 【ondragover】事件中設置　preventDefault 去容許被放置
dragover(e: Event) {
    e.preventDefault();
}
// 4. 放置，重置位置 --> 【drap】事件將對象轉移到目的地
drop(e: DragEvent, endIndex) {
    e.preventDefault(); 
    // 【dataTransfer.getData】 被拖動的元素所在數組中的index
    const startIndex = e.dataTransfer.getData('Text'); 
    const tmp = this.printList[startIndex]; 
    this.printList[startIndex] = this.printList[endIndex];  // 【endIndex】 爲目的地的索引值
    this.printList[endIndex] = tmp;
}

六. 美化原生滾動軸樣式

<div class="m-video-list-wrapper" id="scrollPosition">
    <div class="videoItem">
        <img src="image/list4.png" alt="">
        <div class="m-list-time">20:13</div>
        <div class="m-list-name">視頻一 201812180841</div>
    </div>
    ...
</div>

.m-video-list-wrapper{
    height: 732px;
    overflow-y: auto;
    overflow-x: hidden;
}
.m-video-list-wrapper::-webkit-scrollbar {  /*滾動條總體樣式*/
    /* 控制 y軸 滾動軸的 寬度 */
    width: 8px;
    /* 控制 x軸 滾動軸的 高度 */
    height: 10px;  
}
.m-video-list-wrapper::-webkit-scrollbar-track { /*滾動條裏面軌道*/
    border-radius: 0px;
    background-color: #eee;
}
.m-video-list-wrapper::-webkit-scrollbar-thumb {  /*滾動條裏面小方塊*/
    border-radius: 5px;
    background: rgba(0,0,0,0.2);
}