提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、输入框的状态切换以及鼠标点击下拉框的出现
- 1.成果图
- 2.需求解析
- 3.实现过程
二、背景色的滑动效果
- 1.成果图
- 2.需求解析
- 3.实现过程
总结

前言

在之前的文章中有分享过利用HTML+CSS制作静态页面（例如前文的阿里矢量图标库官网的实现），但之前的实现过程并未涉及JS的内容，今天实现了几个小功能，其中运用到了之前所讲的知识点，在这里一并分享给大家吧~

一、输入框的状态切换以及鼠标点击下拉框的出现

1.成果图

2.需求解析

蓝色区域的效果实现——如上图所示，当用户点击蓝色区域时，下拉框呈现对应的打开或关闭状态，当鼠标点击其他区域时，该区域也会呈现关闭状态，那么如何实现呢？

解决方法：在书写结构时，可将蓝色区域设置为input框 type类型选为button（具体实现过程见下文）随后利用输入框的获取/失去焦点事件进行控制。

输入框的效果实现—— 可利用输入框的获取/失去焦点事件实现。

3.实现过程

HTML 结构

<!-- 搜索框 --><div class="search-total-box"><input type="button" class="search-upbox" value="图标"><i class="iconfont arrow-down"></i><!-- 下拉框 --><div class="search-downbox">图标</div></input><div class="word">搜索图标<b>20,830,680</b></div><input type="text" id="input"></div>

CSS样式

.search-total-box {width: 760px;height: 58px;line-height: 58px;text-align: center;margin: 0 auto;border: 1px solid rgba(34, 43, 95, .79);background: rgba(14, 16, 52, .5);border-radius: 40px;padding: 0 4px;position: relative;transition: all .4s;
}.search-total-box:hover {border-color: #6974b3;
}.search-upbox {background: #6272D6;width: 130px;height: 50px;line-height: 50px;margin-top: 3px;border-radius: 45px;border: 1px solid transparent;text-align: center;font-size: 14px;color: #ffffff;position: relative;left: -316px;top: 1px;outline:none;
}.arrow-down{position: absolute;left: 100px;top: 2px;font-size: 14px;color: #ccc;transition: transform .3s, top .3s;
}.search-downbox {position: absolute;width: 120px;height: 50px;line-height: 50px;box-shadow: 0 0 4px 0 #6973b3;border-radius: 6px 6px 4px 4px;background-color: #090723;top: 60px;left: 10px;display: none;color: #ffffff;font-size: 14px;
}.search-total-box>#input {width: 590px;height: 44px;position: absolute;top: 7px;right: 28px;outline: none;background: transparent;border: none;color: #fff;font-size: 18px !important;
}.search-total-box .word {margin-top: -58px;font-size: 14px;color: #a6a5ad;
}.search-total-box .word>b {padding-left: 6px;color: #ff0200;font-weight: 400;
}

JS行为

// 设置图标按钮单击下拉框出现
// 获取按钮
let upbox = document.getElementsByClassName("search-upbox")[0];
let downbox = document.getElementsByClassName("search-downbox")[0];
let arrow = document.getElementsByClassName("arrow-down")[0];//  设置点击事件,为upbox设置鼠标监听事件，当鼠标点击时，设置相关效果
upbox.addEventListener("click",function () {if (downbox.style.display == "block") {downbox.style.display = "none";arrow.style.transform = "rotate(0deg)";} else {downbox.style.display = "block";arrow.style.transform = "rotate(180deg)";}},false
);upbox.onblur = function () {downbox.style.display = "none";arrow.style.transform = "rotate(0deg)";
};// 当输入框获取焦点时，预留文字消失
// 获取输入框和预留文字部分
var input = document.getElementById('input');
var word  = document.getElementsByClassName('word')[0];
input.onfocus = function( ){word.style.display = 'none';
}
input.onblur  = function( ){word.style.display = 'block';
}

二、背景色的滑动效果

1.成果图

2.解析

当用户点击某元素时，相应的背景色以及如上图所示的红色底线也应该做相应的调整。

这就要利用到鼠标的点击事件并控制该元素滑动的距离并结合全文所讲的变形的知识点即可实现该功能

3.实现过程

3.1红色背景区域实现过程

HTML结构

 <div class="box" id="red-box"><ul><li>所有图标</li><li>开放图标</li><li>私有图标<i class="iconfont why"></i></li></ul><!-- 红色背景滑块 --><div id="cover"></div></div>

CSS样式

.box {width: 964px;height: 33px;margin: 12px 0px 20px;
}.box>ul {width: 270px;height: 32px;background: #ddd;border-radius: 40px;display: inline-block;vertical-align: middle;position: relative;
}.box>ul>li {float: left;width: 90px;height: 32px;line-height: 32px;text-align: center;position: relative;z-index: 2;font-size: 12px;color: #333;cursor: pointer;transition: color .2s ease-in-out;
}
.box>ul>li:first-child{color: #fff;
}
#cover {position: relative;left: 0;top:-32px;width: 90px;height: 32px;background-color: #ff0000;z-index: 1;border-radius: 17px;cursor: auto;transition: left .1s ease-in-out;
}.why {margin-left: 5px;color: #999;font-size: 30px;font-weight: bold;vertical-align: middle;
}

// 我的资源区域点击切换效果实现
// 获取每一个li
var active0 = document.querySelectorAll('.project-left li')[0];
var active1 = document.querySelectorAll('.project-left li')[1];
var active2 = document.querySelectorAll('.project-left li')[2];
// 获取底部红色的线条
var line = document.getElementById('red-line');// 为每一个 li 绑定单击事件
active0.onclick = function( ){active0.className = 'my-source';line.style.left = '35px';
}active1.onclick = function( ){active1.className = 'my-source';line.style.left = '130px';
}active2.onclick = function( ){active2.className = 'my-source';line.style.left = '219px';
}

3.2我的资源下方滑动条

HTML结构

 <!-- 项目与资源区域 --><div class="project-left"><ul><li class="my-source"><a href="#">我的资源</a></li><li  class="my-source"><a href="#">我的收藏</a></li><li  class="my-source"><a href="#">我的项目</a></li></ul><!-- 底部红色线条 --><span id="red-line"></span></div>

CSS样式


.project-left {width: 276px;height: 50px;position: relative;
}.project-left li {float: left;width: 56px;height: 50px;line-height: 50px;padding: 0 8px;text-align: center;margin-right: 20px;
}.project-left li:hover a {color: #fff;
}#red-line {width: 72px;height: 2px;background: red;display: block;z-index: 10;transition: width .1s ease-in-out;position: absolute;bottom: -1px;left: 35px;transform: translate(-50%, 0);
}.project-left li:first-child a {color: #fff;
}.project-left li>a {font-size: 14px;color: #a6a5ad;
}

JS行为

// 红色图标的背景色切换效果// 获取红色图标下的所有子元素
let list0 = document.querySelectorAll("#red-box li")[0];
let list1 = document.querySelectorAll("#red-box li")[1];
let list2 = document.querySelectorAll("#red-box li")[2];// 获取红色滑块
let cover = document.getElementById("cover");// 获取问号小图标
let why = document.getElementsByClassName('why')[0];
console.log(why);
// 为每一个li添加点击事件
list0.onclick = function () {cover.style.left = "0";list0.style.color = "#fff";list1.style.color = "#333";list2.style.color = "#333";why.style.color = '#999';
};
list1.onclick = function () {cover.style.left = "90px";list1.style.color = "#fff";list0.style.color = "#333";list2.style.color = "#333";why.style.color = '#999';
};
list2.onclick = function () {cover.style.left = "180px";list2.style.color = "#fff";list0.style.color = "#333";list1.style.color = "#333";why.style.color = '#fff';
};

总结

ok,写到这里今天的分享也就到此结束啦，今天天气很好，本人很开心，如果你看到这里也记得要笑一笑哦，最后诚挚祝福屏幕前的你健康幸福、平安喜乐。

JS——背景色的滑动效果以及输入框的状态切换效果实现相关推荐

下滑加载更多js_vue.js怎么实现滑动到底部加载更多数据效果？
vue.js怎么实现滑动到底部加载更多数据效果?下面本篇文章给大家简单介绍一下vue实现滑动到底部加载更多效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 本文实例为大家分享了v ...
Android左右滑动控件实现开关的切换效果
/** * 开关控件,通过左右滑动控件实现开关的切换效果 <br> * 使用时需要设置开关状态监听{@link OnSwitchStateChangeListener} <br& ...
html百叶窗切换效果,js实现绿白相间竖向网页百叶窗动画切换效果
本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果.分享给大家供大家参考.具体分析如下: 前面我们讲解了一个网页百叶窗切换动画效果,不过是横向百叶窗,这个是竖向百叶窗,代码基本一样: 百叶窗页面 ...
Swift - UITableView状态切换效果
Swift - UITableView状态切换效果效果源码 https://github.com/YouXianMing/Swift-Animations // // TableViewTapAn ...
vue 选项卡可以滑动_vue实现选项卡及选项卡切换效果
这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回 ...
自定义控件---继承ViewGroup类方式（循序渐进之第3步效果----图片左右拖动+RadioGroup切换效果）
-----------------------下面这个效果只是整个效果的第三步-(目前左右拖动图片+回弹效果+RadioGroup切换效果)---一会继续更新博客------------------- ...
js 展开折叠动画原理，jquery的toggle切换效果
效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...
html div点击选中效果,纯css实现选中切换效果
最近不太忙,多写几篇文章.很多时候我们用js来实现视觉效果,其实不用那么麻烦,掌握一些常用的css知识能让你事半功倍,这篇文章讲的是使用纯css来实现一个列表项的选中效果,希望对你有所帮助实现这个效 ...
android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果不知道这种效果大家叫什么名字?如果有更合适的名字可以在 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...

JS——背景色的滑动效果以及输入框的状态切换效果实现

文章目录

前言

一、输入框的状态切换以及鼠标点击下拉框的出现

1.成果图

2.需求解析

3.实现过程

HTML 结构

CSS样式

JS行为

二、背景色的滑动效果

1.成果图

2.解析

3.实现过程

3.1红色背景区域实现过程

HTML结构

CSS样式

3.2我的资源下方滑动条

HTML结构

CSS样式

JS行为

总结

JS——背景色的滑动效果以及输入框的状态切换效果实现相关推荐

最新文章

热门文章