html简单组件（五）：点击旋转箭头

实现效果图：

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>test</title><script src="https://cdn.staticfile.org/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>

html简单组件（五）：点击旋转箭头相关推荐

仿B站旋转箭头下拉刷新控件实现
前言: 最近在B站看到有一个下拉控件,带箭头旋转的,而且我也发现现在很多APP也流行这个带箭头旋转的下拉控件,就想自己实现一个.研究了一段时间,基本作出了实现,下面Post个代码上来,给需要的小伙伴一 ...
微信小程序——1、自定义顶部渐变色2、封装好的自定义顶部栏（父组件获取子组件的点击事件）
1.自定义顶部渐变色第一种使用代码实现渐变效果图: .json代码 "navigationStyle":"custom" .wxml代码 <view ...
如何快速制作专属的电子名片？这简单的五步操作让你快速拥有
在大数据互联网时代,许多的智能产品已经进入到人们日常生活和工作的各个领域.在日常人际交往和商务社交中,电子名片作为一种新的智能产品,正在逐步淘汰传统纸质名片.然而,仍有许多的商务人士还不会使用和制作& ...
vue点击左右箭头左右滑动效果
点击左右箭头左右滑动效果代码: <template><div class="vertical-scroll-wrap"><svg class=&qu ...
点击左右箭头滑动导航栏，动态隐藏/显示左右箭头
一.需求 1. 点击左箭头,导航栏向左滑动.当导航栏滑动到最左边时,隐藏右箭头: 2. 点击右箭头,导航栏向右滑动.当导航栏滑动到最右边时,隐藏左箭头: 3.点击导航A,导航A高亮显示. 二.思路 1 ...
代码的简单设计五原则
欢欢:"你看我的代码用了策略模式和状态模式,假如后面客户会有这样的需求,可以无缝扩展,多么健壮!" 清扬一脸狐疑,心中念叨了数遍 :"哼,过度设计!",只见她欲 ...
要嫁就嫁程序员！原因很简单：五成表示工资愿交给另一半！
俗话说得好,嫁人就嫁程序员,钱多话少脾气好.虽然看上去程序员应该不愁婚嫁,但近日也出现了年薪百万程序员遭亲妈一元起"拍卖"相亲的新闻.程序员的恋爱生活到底怎么样?BOSS直聘就程序 ...
element-ui 框架的checkbox组件：点击事件与选中判断 - 代码篇
vue + element-ui 框架的checkbox组件:点击事件与选中判断代码如下: html部分  <div class="btn ...
用jQuery做点击下箭头改变方向
先上一张图,效果就是要求点击下箭头,变成上箭头,再点击恢复原状,其实做这个并不难,但需要注意的是,如果设置全局变量flag,当同时点开多个条目,箭头方向就会失常.所以要给每个img图片上设置一个自定义 ...

html简单组件（五）：点击旋转箭头

html简单组件（五）：点击旋转箭头

实现效果图：

完整代码

html简单组件（五）：点击旋转箭头相关推荐

最新文章

热门文章