1. CSS faux-realistic heart triangle effects

<div class="triangle"></div> // // Adjust position position: absolute; border: 10px solid white; border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent; }Copy the code

2. Angular beautifies native select with drop-down options (hollow drop-down arrows)

<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>
Copy the code
.triangle{ 
   position: absolute;  // Control the position
   margin-left: 220px;
   margin-top: 10px;
  .inner-down {  // Hollow drop down arrow
    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 {  // Hollow pull arrow
    width: 8px;
    height: 8px;
    border: 1px solid #CACFD2;
    border-width: 0 0 1px 1px;
    transform: rotate(135deg);
    margin-bottom: 10px; }}Copy the code

3. Angular-drag slider that mimics video

Js native imitation horizontal drag axis 

<div class="scroll" id="scroll">
    <div class="bar" id="bar"></div>
    <div class="mask" id="mask"></div>
</div>
Copy the code
.scroll {  // Total progress bar
  width: 70%;
  height: 5px;
  background: #d9e4e7;
  position: relative;
  margin-top: 15px;
  border-radius: 5px;
}
.bar {  // Control handle loop
  width: 20px;
  height: 20px;
  background: #fff;
  position: absolute;
  top: -7px;
  left: 0;
  cursor: pointer;
  border-radius: 50%;
}
.mask {  // Progress made
  position: absolute;
  left: 0;
  top: 0;
  background: #3498db;
  width: 0;
  height: 5px;
  border-radius: 5px;
}
Copy the code
- Angular6 cannot pass directlydocumentObject to manipulate page objects! You need to do it angular specific:1. import { ElementRef } from '@angular/core'; 
2. constructor(
        public element: ElementRef
    ) {}3.By * *this.element.nativeElement.querySelector('#scroll'); Operation object! ** videoProgress() {const _that = this;
    const scroll = this.element.nativeElement.querySelector('#scroll');  // Total progress bar
    const bar = this.element.nativeElement.querySelector('#bar');  // Drag the small white circle when the mouse is pressed down
    const mask = this.element.nativeElement.querySelector('#mask'); // The blue progress has been made
    bar.onmousedown = function (event) {  // Mouse down the small circle event
        let barleft = 0;
        const leftVal = event.clientX - this.offsetLeft;
        document.onmousemove = function (event2) {  // Mouse movement events
            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';  // Set the progress length
            bar.style.left = barleft + 'px';  // Set the length of the circle from the starting position
            // The percentage that is currently played
            _that.currentTime = (barleft / (scroll.offsetWidth - bar.offsetWidth)) * (_that.getPlayBackTotalTime); 

            // Solve some operations, such as: the left mouse button has been up, progress bar will still slide back and forth with the mouse, appear hover effect bug!
            if (window.getSelection) {
                if (window.getSelection().empty) {   // Chrome
                    window.getSelection().empty();
                } else if (window.getSelection().removeAllRanges) {   // Firefox
                    window.getSelection().removeAllRanges(); }}}document.onmouseup = function () { // Do nothing with the mouse
            document.onmousemove = null; }}}Copy the code

4. Original copy video player

<! -- Custom controls -->
<div class="control-wrapper">
    <div class="v-pause-play-button">
        <img src="./image/video-stop.png" alt="" class="c-icon" id="videoControl">
    </div>
    <! -- Play progress bar -->
    <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>
    <! - the volume - >
    <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>
Copy the code
.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; } /* progress bar */.scroll {width:75%; height: 6px; background: #d9e4e7;; position: relative; margin: 0 auto; margin-top: 15px; border-radius: 5px; z-index: 999; } /* Control handle loop */. Bar {width: 15px; height: 15px; background: #fff; position: absolute; top: -5px; left: 0; cursor: pointer; border-radius: 50%; } /* Progress made */. Mask {position: absolute; left: 0; top: 0; background: #3498db; width: 0; height: 6px; border-radius: 5px; } /* Volume progress bar */. 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; } /* Control handle loop */. Bar_voice {width: 15px; height: 15px; background: #fff; position: absolute; top: -5px; left: 0; cursor: pointer; border-radius: 50%; } /* Progress made */. Mask_voice {position: absolute; left: 0; top: 0; background: #3498db; width: 0; height: 6px; border-radius: 5px; }Copy the code
// Play control progress bar
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 the progress bar to update the progress bar style and record drag_playPercent
            drag_playPercent = parseInt(barleft / (scroll.offsetWidth - bar.offsetWidth) * 100);
            mask.style.width = drag_playPercent + The '%';
            bar.style.left = drag_playPercent + "%"; $(})'body').on('mouseup'.function () {$('body').off();   // Remove all events, fix hover bug when dragging quickly!. }}})// Volume control progress bar
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 the progress bar to update the progress bar style and record the drag percentage
            drag_voice_playPercent = parseInt(barleft / (scroll_voice.offsetWidth - bar_voice.offsetWidth) * 100);
            mask_voice.style.width = drag_voice_playPercent + The '%';
            bar_voice.style.left = drag_voice_playPercent + "%"; $(})'body').on('mouseup'.function () {$('body').off(); . }}})Copy the code

5. Angular6 — Implements list drag-and-drop and sorting

  • Html5 implements drag and sort natively
<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>
Copy the code
// 1. Set the element to be dragged. You can drag and drop --> Set the draggable property
// 2. Set the drag element --> datatransfer. setData set the drag element in the ondragstart event
dragstart(ev: DragEvent, index) {
	ev.dataTransfer.setData('Text', index); // Pass the index of the element to be dropped
}
// 3. Set the drag and drop destination --> The drag and drop destination needs to be set in the ondragover event   PreventDefault to allow to be placed
dragover(e: Event) {
	e.preventDefault();
}
The draP event transfers the object to the destination
drop(e: DragEvent, endIndex) {
    e.preventDefault(); 
    // [datatransfer. getData] Index of the array in which the dragged element is located
    const startIndex = e.dataTransfer.getData('Text'); 
    const tmp = this.printList[startIndex]; 
    this.printList[startIndex] = this.printList[endIndex];  // [endIndex] is the index value of the destination
    this.printList[endIndex] = tmp;
}
Copy the code

6. Beautify the native scroll axis style

<div class="m-video-list-wrapper" id="scrollPosition">
    <div class="videoItem">
        <img src="image/list4.png" alt="">
        <div class="m-list-time">Which were</div>
        <div class="m-list-name">A 201812180841 video</div>
    </div>.</div>
Copy the code
.m-video-list-wrapper{
    height: 732px;
    overflow-y: auto;
    overflow-x: hidden;
}
.m-video-list-wrapper::-webkit-scrollbar {  /* Scroll bar overall style */
    /* Control the width of the y axis */
    width: 8px;
    /* Controls the height of the X-axis */
    height: 10px;  
}
.m-video-list-wrapper::-webkit-scrollbar-track { /* Track inside scroll bar */
    border-radius: 0px;
    background-color: #eee;
}
.m-video-list-wrapper::-webkit-scrollbar-thumb {  /* Small box inside scroll bar */
    border-radius: 5px;
    background: rgba(0,0,0,0.2);
}
Copy the code