关于HTML元素点击的时候，背景颜色秒进，缓缓退出的方法
废话不多说，上代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style>
html {} * {
margin: 0;
padding: 0;
list-style: none;
} .btn.active,
.active:active {
transition-duration: 0s;
background-color: #d9d9d9;
} .btn {
transition-duration: 3s;
} li {
height: 50px;
font-size: 30px;
line-height: 50px;
text-align: center;
} li:hover {
cursor: pointer;
}
</style>
</head> <body>
<ul>
<li class="btn">123131123131</li>
<li class="btn">li</li>
<li class="btn">li</li>
<li class="btn">li</li>
</ul>
<script> function fn() {
// 在body里加个事件
document.body.addEventListener('mousedown', function(e) {
var target = e.target;
// 这里的类名btn就加在你想实现效果的元素里
if (target.className.indexOf('btn') !== -1) {
target.classList.add('active');
}
}, false);
document.body.addEventListener('mouseup', function(e) {
var target = e.target;
if (target.className.indexOf('btn') !== -1) {
target.classList.remove('active');
}
}, false);
}
fn(); </script>
</body> </html>
关于HTML元素点击的时候，背景颜色秒进，缓缓退出的方法的更多相关文章
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- 【百度统计】设置页面元素点击事件转化pv、uv
html元素点击事件内添加代码:_hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1. '_trackEvent' ...
- CSS 解决z-index上层元素遮挡下层元素点击事件问题
解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 需求 ...
- win7系统窗口背景颜色设置为护眼色的方法---打开的任意窗口显示为护眼色，程序眼必备
win7系统窗口背景颜色设置为护眼色的方法 1. 打开"窗口颜色与外观"对话框 方法1:从控制面板开始 控制面板\外观和个性化\个性化\窗口颜色和外观 方法2:桌面上鼠标右键,个性 ...
- html中如何实现表格移入移出时背景颜色改变？（两种方法）
html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...
- 取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...
- 取消a标签或者onclick在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...
- Android中的ListView点击时的背景颜色设置
想设置listview中每行在点击.选中等不同状态下有不同的背景颜色,或者背景图片. 这可以用Android的Selector来实现.它可以定义组件在不同状态下的显示方式. 新建一个xml文件list ...
- css取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...
随机推荐
- clearfix的最佳方案----在路上（22）
clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...
- CI Weekly #8 | CI/CD 技能进阶路线
在使用 flow.ci 进行持续集成的过程中,也许你会遇到一些小麻烦.最近我们整理了一些常见问题在 flow.ci 文档之 FAQ,希望对你有用.如果你遇到其他问题,也可以通过「在线消息」或去 Git ...
- 3．实现一个名为Person的类和它的子类Employee，Employee有两个子类Faculty 和Staff。
23．实现一个名为Person的类和它的子类Employee,Employee有两个子类Faculty 和Staff. 具体要求如下: (1)Person类中的属性有:姓名name(String类型) ...
- sklearn基础知识-准备阶段
6.标签特征二元化 处理分类变量还有另一种方法,不需要通过OneHotEncoder,我们可以用LabelBinarizer. 这是一个阈值与分类变量组合的方法. In [1]: from sklea ...
- jquery动画效果中，避免持续反应用户的连续点击
一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...
- Ghostscript.Net Pdf 转 Image
需求: 项目中需要实现PPT转Image的功能,之前项目中用的是使用Office COM组件实现的功能,通过.NET与Office COM组件的互操作(Interop)来操作Office文档 但是在生 ...
- OpenCASCADE构造一般曲面
OpenCASCADE构造一般曲面 eryar@163.com Abstract. 本文主要介绍常见的曲面如一般柱面(拉伸曲面).旋转面在OpenCASCADE中的构造方法,由此思考一般放样算法的实现 ...
- 老男孩Python全栈开发（92天全）视频教程 自学笔记17
day17课程内容: 装饰器回顾练习 登录功能: #登录京东,不同的页面,选择页面,然后不同的登录方式with open('作业5.1jingdong','w',encoding='utf8') as ...
- Go基础之锁的初识
当我们的程序就一个线程的时候是不需要用到锁的,但是通常我们实际的代码不会是单个线程的,所有这个时候就需要用到锁了,那么关于锁的使用场景主要涉及到哪些呢? 当我们多个线程在读相同的数据的时候则是需要加锁 ...
- javascript实现游戏贪吃蛇
1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇 ...