css - 項目常見效果彙總
1. 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;
}
複製代碼
2. 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;
}
}
複製代碼
3. Angular - 仿video的拖拉滑動條
<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;
}
}
}
複製代碼
4. 原生仿寫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();
...
})
}
}
複製代碼
5. Angular6 -- 實現列表拖拽和排序
<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;
}
複製代碼
6. 美化原生滾動軸樣式
<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);
}
複製代碼
相關文章
- 1. CSS效果常見問題
- 2. css常見效果實現
- 3. CSS常見錯誤彙總
- 4. 〔總結〕JQ常見效果整理彙總資料
- 5. 〔總結〕H5常見效果整理彙總資料
- 6. React項目Jest常見問題彙總
- 7. JavaEE 項目常見錯誤彙總
- 8. 《異常彙總》項目異常彙總
- 9. css 實現常見 loading 效果
- 10. PC常見CSS效果錦集 - 01
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • SVG 模糊效果 - SVG 教程
- • 常用的分佈式事務解決方案
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS效果常見問題
- 2. css常見效果實現
- 3. CSS常見錯誤彙總
- 4. 〔總結〕JQ常見效果整理彙總資料
- 5. 〔總結〕H5常見效果整理彙總資料
- 6. React項目Jest常見問題彙總
- 7. JavaEE 項目常見錯誤彙總
- 8. 《異常彙總》項目異常彙總
- 9. css 實現常見 loading 效果
- 10. PC常見CSS效果錦集 - 01