JS实现鼠标点击箭头旋转180度功能

更新时间：2024年02月23日 16:26:37 作者：suoh's Blog

这篇文章主要介绍了JS实现鼠标点击箭头旋转180度的效果,通过点击三角按钮旋转180度,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧

JS实现鼠标点击箭头旋转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自动触发点击事件

主动触发事件：使用dispatchEvent方法

该方法能模拟用户行为，如点击（click）操作等。标准使用dispatchEvent方法，IE6/7/8则使用fireEvent方法。

var btn=document.getElementById("myBtn");
var event = new MouseEvent("click");
btn.dispatchEvent(event); // 触发myBtn的点击事件

到此这篇关于JS实现鼠标点击箭头旋转180度的文章就介绍到这了,更多相关js箭头旋转180度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue实现按钮旋转和移动位置的实例代码

JS闭包的几种常见形式实例详解
本文通过实例代码给大家详细介绍了js闭包的几种常见形式，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-09-09
js+SVG实现动态时钟效果
这篇文章主要为大家详细介绍了js+SVG实现动态时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
HTML+CSS+JavaScript创建一个简单的井字游戏
使用javascript创建游戏是最有趣的学习方式。它会让你保持动力，这对于学习 Web 开发等复杂技能至关重要。本文将使用HTML、CSS和 Javascript创建一个井字游戏。感兴趣的童鞋可以关注一下
2021-11-11
纯JS开发baguetteBox.js响应式画廊插件
这篇文章主要介绍了纯JS开发baguetteBox.js响应式画廊插件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
jquery在Chrome下获取图片的长宽问题解决
需要获得图片的长宽，在IE、FireFox下均正常，就TMD在Chrome中不行，有人说是Chrome版本的问题，最终终于找到了解决方法，在这与大家分享下
2013-03-03
JavaScript中instanceof与typeof运算符的用法及区别详细解析
这篇文章主要是对JavaScript中instanceof与typeof运算符的用法及区别进行了详细的分析介绍。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
js获取对象属性值的两种方法使用总结
这篇文章主要给大家介绍了关于js获取对象属性值的两种方法使用,分别是通过.获取和通过[]获取这两种方法,文中介绍了详细的方法和不同点,需要的朋友可以参考下
2023-05-05
js计算两个日期间的天数月的实例代码
本文通过实例代码给大家介绍了基于js计算两个日期间的天数月，文中还通过一段代码给大家简单说明了js计算两个日期差的方法，感兴趣的朋友跟随小编一起看看吧
2018-09-09
浅谈Javascript事件对象
本文主要介绍了Javascript事件对象的相关实例。具有一定的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript阻止浏览器返回按钮的方法
这篇文章主要介绍了JavaScript阻止浏览器返回按钮的方法,可实现通过javascript禁用掉返回按钮的功能,需要的朋友可以参考下
2015-03-03