js点击箭头旋转的实现

我们经常可以在网页中看到向下的箭头，并且在我们点击时，箭头会发生旋转，这又是如何做到的呢？我们来看一看，先上效果图：

可以看到，在点击箭头时，箭头的方向旋转了，并且再次点击回到原来的样子，我们看一看代码：

首先是html样式

    <header><div class="nav"><button title="应用启动器"><i class="fa fa-bars"></i></button><span class="user"><a href="">Microsoft 帐户</a></span><span class="wrapper-1">|</span><div class="middle-nav"><ul><li><a href="">你的信息</a></li><li><a href="">隐私</a></li><li><a href="">安全</a></li><li class="dropdown-item"><a href="javascript:;" onclick="appearBox()">付款和计算 <iclass="fa fa-angle-down icon"></i></a><div class="dropdown-content" style="display: none;"><ul><li><a href="">订单历史记录</a></li><li><a href="">付款选项</a></li><li><a href="">通讯录</a></li><li><a href="">账单帮助</a></li></ul></div></li><li><a href="">服务和订阅</a></li><li><a href="">设备</a></li></ul></div><div class="right-nav"><a href="" title="帮助"><i class="fa fa-question"></i></a><a href="" title="的客户经理"><i class="fa fa-user-o"></i></a></div></div></header>

html代码没什么特别的，然后我们来看css代码：

body {background-color: #F2F2F2;
}/* 头部样式 */
.nav {height: 48px;width: 1536px;margin: 0 auto;background-color: #006FC9;display: flex;
}/* 左侧按钮样式 */
button {width: 48px;height: 48px;background-color: #006FC9;cursor: pointer;border: none;
}button i {color: white;
}button:hover {background-color: #006BC3;
}/* 导航栏样式 *//* 微软图标样式 */
.user {height: 48px;width: 130px;display: inline-block;text-align: center;
}.user>a {color: white;line-height: 48px;font-weight: 600;
}.user:hover {background-color: #006BC3;
}.wrapper-1 {display: inline-flex;height: 100%;align-items: center;margin-left: 0px;color: white;
}/* 中部导航栏样式 */.middle-nav {height: 48px;
}.middle-nav>ul>li {float: left;margin-left: 20px;height: 48px;
}.middle-nav>ul>li>a {color: white;line-height: 48px;font-size: 14px;padding: 10px;
}.middle-nav>ul>li:hover {background-color: #006BC3;
}i {padding-left: 3px;
}/* 下拉框样式 */
.dropdown-item {position: relative;
}.dropdown-content {position: absolute;z-index: 10;width: 180px;height: 140px;background-color: white;box-shadow: 1px 1px 5px #D4D4D4;
}.dropdown-content>ul>li {width: 180px;height: 35px;
}.dropdown-content>ul>li>a {line-height: 35px;color: #201F1E;padding-left: 6px;font-size: 14px;
}.dropdown-content li:hover {background-color: #F4F4F4;
}.arrow {margin-left: 3px;transform: rotate(180deg);transition: all 0.5s;}.box-style {animation: move 0.1s 1 linear;
}@keyframes move {from {height: 0;}to {height: 140px;}
}/* 导航栏右边设置 */
.right-nav {margin-left: 700px;
}.right-nav>a {display: inline-block;height: 48px;width: 48px;text-align: center;
}.right-nav i {color: white;line-height: 48px;}.right-nav>a:hover {background-color: #006BC3;
}

最后是js代码：

// 导航栏下拉样式
let content = document.getElementsByClassName("dropdown-content")[0];
let dropitem = document.getElementsByClassName("dropitem")[0];
let icon = document.getElementsByClassName("icon")[0]
function appearBox(e) {console.log(content);if (content.style.display == "none") {content.style.display = "block"} else {content.style.display = "none" }if(icon.classList.contains("arrow")){icon.classList.remove("arrow");}else{icon.classList.add("arrow");}content.classList.add("box-style");
}

好了，今天就到这里了，喜欢就关注我吧~~~~

js点击箭头旋转的实现相关推荐

CSS3 + jQuery点击使箭头旋转
使用transition和transform:rotate()来实现点击箭头让他转动一定的角度. <i class="fas fa-chevron-right setfont righ ...
vue实现点击箭头的旋转动画（收起展开）效果
实现方法:用vue动态绑定class的方法,实现用不同的class渲染箭头,达到点击箭头的旋转效果模板的内容: //这里是箭头图片 <img :class="{ 'arrowTran ...
Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...
功能强大漂亮的js图片相册,js点击小图显示大图
原生js点击图片触发弹窗页面显示模糊的小图片(small_X.jpg),点击全屏显示高清大图片(large_X.jpg) 可实现放大.缩小.拖拽.旋转.上一张.下一张以下为demo相关页面展示: ...
CSS简单动画---自用展开区域动画（箭头旋转，区域拉伸）
箭头旋转效果: 代码: <template> <view> <view class="arrow" :style="{transform:i ...
vue 上下键li_Vue实现点击箭头上下移动效果
{{item.name}} //i ↓ ↑ Vue.config.productionTip = false//不去提示 new Vue({ el: "#app", data() ...
vue列表左右箭头滑动_Vue实现点击箭头上下移动效果
{{item.name}} //i ↓ ↑ Vue.config.productionTip = false//不去提示 new Vue({ el: "#app", data() ...
** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图代码: <div id="classifyScroll" :class= ...
JS点击显示隐藏内容
JS点击显示隐藏密码思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

js点击箭头旋转的实现

js点击箭头旋转的实现相关推荐

最新文章

热门文章