JS實現(xiàn)鼠標點擊箭頭旋轉180度功能
更新時間：2024年02月23日 16:26:37 作者：suoh's?Blog
這篇文章主要介紹了JS實現(xiàn)鼠標點擊箭頭旋轉180度的效果,通過點擊三角按鈕旋轉180度,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
JS實現(xiàn)鼠標點擊箭頭旋轉180度功能
效果：
<div @click="showChecklist" class="checkCLass cur pr-20px pl-20px pa flex ai-center">
<span>{{ checkListStatus() }}</span>
<p class="trangle"></p>
</div>下面是三角形狀的樣式
.trangle {
width: 0;
transition: all 0.2s ease-in;
height: 0;
border-bottom: 0 solid transparent;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 6px solid #fff;
}
.rotateBottom {
transform: rotate(-180deg);
}點擊，三角按鈕旋轉180度
const showChecklist = () => {
const dom = document.querySelector(".trangle");
if (!isShowChecklist.value) {
dom?.classList.add("rotateBottom");
} else {
dom?.classList.remove("rotateBottom");
}
isShowChecklist.value = !isShowChecklist.value;
};補充：
原生js自動觸發(fā)點擊事件
主動觸發(fā)事件：使用dispatchEvent方法
該方法能模擬用戶行為，如點擊（click）操作等。 標準使用dispatchEvent方法，IE6/7/8則使用fireEvent方法。
var btn=document.getElementById("myBtn");
var event = new MouseEvent("click");
btn.dispatchEvent(event); // 觸發(fā)myBtn的點擊事件到此這篇關于JS實現(xiàn)鼠標點擊箭頭旋轉180度的文章就介紹到這了,更多相關js箭頭旋轉180度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例,本文用了多個例子來講解arguments的使用,需要的朋友可以參考下2014-08-08
完美解決el-input輸入框輸入數(shù)組傳參報錯問題
這篇文章主要介紹解決el-input輸入框輸入數(shù)組傳參報錯問題,該問題是由于JSON規(guī)范要求字符串必須使用雙引號(")而非單引號(')導致的,本文結合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2025-05-05
下面小編就為大家?guī)硪黄狫S獲取當前使用的瀏覽器名字以及版本號實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了js中各種時間日期格式之間轉換的相關資料,還有獲取今天的年月日和計算兩個日期之間的相差天數(shù)的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03
這篇文章主要為大家詳細介紹了bootstrap select插件封裝成Vue2.0組件的相關方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了uniapp組件之tab選項卡滑動切換功能實現(xiàn)，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-01-01
寫了個XML+Tree無窮樹js版...2007-09-09
js操作table中tr的順序實現(xiàn)上移下移一行的效果
這篇文章主要介紹了js操作table中tr的順序實現(xiàn)上移下移一行的效果 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
很多DOM對象都有原生的事件支持，向div就有click、mouseover等事件，事件機制可以為類的設計帶來很大的靈活性，相信.net程序員深有體會。隨著web技術發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機制，通過事件對外通信，能夠極大提高開發(fā)效率2013-08-08
JavaScript有5種基本的數(shù)據(jù)類型，分別是：布爾、null、undefined、String和Number。這篇文章主要介紹了JavaScript的值傳遞和引用傳遞,需要的朋友可以參考下2018-10-10