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实现按钮旋转和移动位置的实例代码

JavaScript中使用arguments获得函数传参个数实例
这篇文章主要介绍了JavaScript中使用arguments获得函数传参个数实例,本文用了多个例子来讲解arguments的使用,需要的朋友可以参考下
2014-08-08
完美解决el-input输入框输入数组传参报错问题
这篇文章主要介绍解决el-input输入框输入数组传参报错问题,该问题是由于JSON规范要求字符串必须使用双引号(")而非单引号(')导致的,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
2025-05-05
JS获取当前使用的浏览器名字以及版本号实现方法
下面小编就为大家带来一篇JS获取当前使用的浏览器名字以及版本号实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
js中各种时间日期格式之间的转换代码示例
这篇文章主要介绍了js中各种时间日期格式之间转换的相关资料,还有获取今天的年月日和计算两个日期之间的相差天数的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-03-03
bootstrap select插件封装成Vue2.0组件
这篇文章主要为大家详细介绍了bootstrap select插件封装成Vue2.0组件的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
uniapp组件之tab选项卡滑动切换功能实现
这篇文章主要介绍了uniapp组件之tab选项卡滑动切换功能实现，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2023-01-01
写了个XML+Tree无穷树js版
写了个XML+Tree无穷树js版...
2007-09-09
js操作table中tr的顺序实现上移下移一行的效果
这篇文章主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
JavaScript自定义事件介绍
很多DOM对象都有原生的事件支持，向div就有click、mouseover等事件，事件机制可以为类的设计带来很大的灵活性，相信.net程序员深有体会。随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率
2013-08-08
深入理解JavaScript的值传递和引用传递
JavaScript有5种基本的数据类型，分别是：布尔、null、undefined、String和Number。这篇文章主要介绍了JavaScript的值传递和引用传递,需要的朋友可以参考下
2018-10-10