jquery 点击修改transform的值,让箭头改变方向
时间: 2023-07-28 10:30:28 浏览: 111
jQuery左右箭头控制文字列表切换特效
可以使用jQuery来实现点击修改transform的值,让箭头改变方向的效果。假设你的箭头是一个div元素,以下是一个简单的实现示例:
HTML代码:
```
<div id="arrow"></div>
<button id="btn">点击翻转箭头</button>
```
CSS代码:
```
#arrow {
width: 20px;
height: 20px;
background-color: #f0f0f0;
transform: rotate(0deg);
}
```
jQuery代码:
```
$(document).ready(function() {
$("#btn").click(function() {
var deg = $("#arrow").css("transform");
var currentDeg = parseInt(deg.replace(/[^0-9\-]/g, ''));
var newDeg = currentDeg + 180;
$("#arrow").css("transform", "rotate(" + newDeg + "deg)");
});
});
```
解释:
1. 在HTML中,我们创建了一个箭头div元素和一个按钮,用于触发翻转箭头的事件。
2. 在CSS中,我们设置了箭头div元素的宽度、高度、背景颜色和初始旋转角度为0度。
3. 在jQuery中,我们使用$()函数来选取箭头div元素和按钮元素,并使用click()函数来绑定按钮的点击事件。
4. 在点击事件中,我们使用css()函数获取当前箭头div元素的transform属性值,然后使用正则表达式去掉非数字和负号,以获取当前的旋转角度。
5. 我们将当前的旋转角度加上180度,得到新的旋转角度,并使用css()函数设置箭头div元素的transform属性值为新的旋转角度。
这样,当我们点击按钮时,箭头div元素就会翻转180度,改变箭头的方向。
阅读全文