1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html简单组件(五):点击旋转箭头

html简单组件(五):点击旋转箭头

时间:2021-09-19 05:43:09

相关推荐

html简单组件(五):点击旋转箭头

html简单组件(五):点击旋转箭头

实现效果图:

完整代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>test</title><script src="/jquery/1.10.2/jquery.min.js"></script><style>.text{display: inline-block;border-top: 5px solid;border-right: 5px solid;width: 50px;height: 50px;border-color: #EA6000;transform: rotate(-45deg);margin: 50px auto auto 100px;transition: all 0.4s ease;-webkit-transition: all 0.5s ease;}</style></head><body><p>点击旋转箭头:</p><span class="text" onclick="change()"></span><script type="text/javascript">var flag = true;function change(){if(flag) {$(".text").css("transform","rotate(135deg)");flag = false;}else {$(".text").css("transform","rotate(-45deg)");flag = true;}}</script></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。