JS實現(xiàn)鼠標點擊箭頭旋轉(zhuǎn)180度功能

更新時間：2024年02月23日 16:26:37 作者：suoh's?Blog

這篇文章主要介紹了JS實現(xiàn)鼠標點擊箭頭旋轉(zhuǎn)180度的效果,通過點擊三角按鈕旋轉(zhuǎn)180度,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧

JS實現(xiàn)鼠標點擊箭頭旋轉(zhuǎ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);
  }

點擊，三角按鈕旋轉(zhuǎn)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)鼠標點擊箭頭旋轉(zhuǎn)180度的文章就介紹到這了,更多相關js箭頭旋轉(zhuǎn)180度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue實現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實例代碼

JS實現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù)示例
這篇文章主要介紹了JS實現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù),涉及javascript針對字符串的遍歷、統(tǒng)計、計算等相關操作技巧,需要的朋友可以參考下
2019-07-07
Electron 使用 Nodemon 配置自動重啟的方法
在Electron開發(fā)過程中,每次代碼修改后需手動重新啟動應用,這一過程可以通過引入Nodemon工具自動化,Nodemon能夠監(jiān)測文件變化并自動重啟服務器,本文給大家介紹Electron 使用 Nodemon 配置自動重啟,感興趣的朋友一起看看吧
2024-09-09
關于JavaScript對象的動態(tài)選擇及遍歷對象
本文為大家介紹下JavaScript對象的兩點：動態(tài)選擇方法及屬性、遍歷對象屬性和方法,需要的朋友可以參考下
2014-03-03
javascript parseUrl函數(shù)(來自國外的獲取網(wǎng)址url參數(shù))
在外國一博客看到一個很好的函數(shù)，獲取網(wǎng)址url等地址參數(shù)。非常不錯，值得參考與收藏。
2010-06-06
JQuery 前臺切換網(wǎng)站的樣式實現(xiàn)
本文說的是在WordPress中怎樣利用JQuery在網(wǎng)站的前臺切換樣式的方法?；蛘哌@篇文章的方法大家可能不是太需要，因為我覺得這是解決我被主題樣式折騰到差不多分裂的原因及結(jié)果的最后手段。
2009-06-06
yepnope.js 異步加載資源文件
yepnope.js是一個能夠根據(jù)輸入條件來選擇性異步加載資源文件的js腳本，可以在頁面上僅加載用戶需要的js/css。
2011-09-09
Canvas實現(xiàn)動態(tài)的雪花效果
本文主要分享Canvas實現(xiàn)動態(tài)的雪花效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
js跨域和ajax 跨域問題的實現(xiàn)思路
大家都知道js是不能跨域的，但我們有時候就要這么用，怎么辦呢？辦法總是有的.
2009-09-09
淺談JS中this在各個場景下的指向
這篇文章主要介紹了淺談JS中this在各個場景下的指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
基于JavaScript實現(xiàn)復選框的全選和取消全選
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)復選框的全選和取消全選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02