快捷導(dǎo)航

JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能

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

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

JS實(shí)現(xiàn)鼠標(biāo)點(diǎ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);
  }

點(diǎn)擊，三角按鈕旋轉(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;
};

補(bǔ)充：

原生js自動(dòng)觸發(fā)點(diǎn)擊事件

主動(dòng)觸發(fā)事件：使用dispatchEvent方法

該方法能模擬用戶行為，如點(diǎn)擊（click）操作等。標(biāo)準(zhǔn)使用dispatchEvent方法，IE6/7/8則使用fireEvent方法。

var btn=document.getElementById("myBtn");
var event = new MouseEvent("click");
btn.dispatchEvent(event); // 觸發(fā)myBtn的點(diǎn)擊事件

到此這篇關(guān)于JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度的文章就介紹到這了,更多相關(guān)js箭頭旋轉(zhuǎn)180度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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

相關(guān)文章

JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例,本文用了多個(gè)例子來講解arguments的使用,需要的朋友可以參考下
2014-08-08
完美解決el-input輸入框輸入數(shù)組傳參報(bào)錯(cuò)問題
這篇文章主要介紹解決el-input輸入框輸入數(shù)組傳參報(bào)錯(cuò)問題,該問題是由于JSON規(guī)范要求字符串必須使用雙引號(hào)(")而非單引號(hào)(')導(dǎo)致的,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2025-05-05
JS獲取當(dāng)前使用的瀏覽器名字以及版本號(hào)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取當(dāng)前使用的瀏覽器名字以及版本號(hào)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
js中各種時(shí)間日期格式之間的轉(zhuǎn)換代碼示例
這篇文章主要介紹了js中各種時(shí)間日期格式之間轉(zhuǎn)換的相關(guān)資料,還有獲取今天的年月日和計(jì)算兩個(gè)日期之間的相差天數(shù)的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-03-03
bootstrap select插件封裝成Vue2.0組件
這篇文章主要為大家詳細(xì)介紹了bootstrap select插件封裝成Vue2.0組件的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
uniapp組件之tab選項(xiàng)卡滑動(dòng)切換功能實(shí)現(xiàn)
這篇文章主要介紹了uniapp組件之tab選項(xiàng)卡滑動(dòng)切換功能實(shí)現(xiàn)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2023-01-01
寫了個(gè)XML+Tree無窮樹js版
寫了個(gè)XML+Tree無窮樹js版...
2007-09-09
js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果
這篇文章主要介紹了js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
JavaScript自定義事件介紹
很多DOM對象都有原生的事件支持，向div就有click、mouseover等事件，事件機(jī)制可以為類的設(shè)計(jì)帶來很大的靈活性，相信.net程序員深有體會(huì)。隨著web技術(shù)發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機(jī)制，通過事件對外通信，能夠極大提高開發(fā)效率
2013-08-08
深入理解JavaScript的值傳遞和引用傳遞
JavaScript有5種基本的數(shù)據(jù)類型，分別是：布爾、null、undefined、String和Number。這篇文章主要介紹了JavaScript的值傳遞和引用傳遞,需要的朋友可以參考下
2018-10-10