HTML触摸正方形变色,移动端模拟hover：按钮点击变色之后还原

需求：点击按钮希望像在PC端那样有个类似于hover的效果，触摸按钮变色，手指离开变回原来的颜色；

方法一：CSS3+JS

用keyframes动画，js点击按钮时添加keyframes动画，定时器移除keyframes动画

移动端按钮点击变色之后还原

.btn{

font-size: 1.5em;

line-height: 2em;

text-align: center;

background: #ce4f54;

color: #fff;

width: 200px;

}

.bounce {

-webkit-animation-name: bounce;

animation-name: bounce;

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both

-webkit-transform-origin: center bottom;

-ms-transform-origin: center bottom;

transform-origin: center bottom

}

#jq22{

animate-duration: 2s; /*//动画持续时间*/

animate-delay: 1s; /*//动画延迟时间*/

animate-iteration-count: 1; /*//动画执行次数*/

}

@-webkit-keyframes bounce {

0%{background: #ce4f54;}

50%{background: #ff0;}

100%{background: #ce4f54;}

}

@keyframes bounce {

0%{background: #ce4f54;}

50%{background: #ff0;}

100%{background: #ce4f54;}

}

按钮按钮

$(function () {

$('#jq22').click(function () {

$('#jq22').addClass('bounce');

setTimeout(function(){

$('#jq22').removeClass('bounce');

}, 1000);

});

});

方法二：JS

用touchstart，touchend来进行样式的添加和移除。

移动端按钮点击变色之后还原

.btn1{

font-size: 1.5em;

line-height: 2em;

text-align: center;

background: #ce39bd;

color: #fff;

width: 200px;

}

.btn2{

font-size: 1.5em;

line-height: 2em;

text-align: center;

background: #f00;

color: #fff;

width: 200px;

}

按钮按钮

$(function () {

function changeColor(id,class1,class2) {

$("#"+id).on("touchstart",function () {

$(this).attr("class",class1)

})

$("#"+id).on("touchend",function () {

$(this).attr("class",class2)

})

}

changeColor("jq22","btn2","btn1")

});

方法三：JS

网友的力量是强大，后来从网上找到了一个列表页的demo，升级版。

移动端模拟hover

html {

font-size: 100px;

}

* {

font-size: .16rem;

}

.content {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

overflow: auto;

z-index: 10;

background-color: #fff;

-webkit-overflow-scrolling: touch;

}

.items {

margin: 0;

padding: 0;

list-style: none;

}

.items li {

box-sizing: border-box;

line-height: .40rem;

text-indent: 1em;

border-bottom: 1px solid #e3e3e3;

}

.items li.active {

background-color: #e3e3e3;

}

• item1
• item2
• item3
• item4
• item5

$(function () {

//自定义tap

$(document).on("touchstart", function (e) {

if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 0);

});

$(document).on("touchmove", function (e) {

if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 1);

});

$(document).on("touchend", function (e) {

if (!$(e.target).hasClass("disable") && $(e.target).data("isMoved") == 0) $(e.target).trigger("tap");

});

//按钮点击效果

$(document).on("touchstart", ".action-btn:not(.disable)", function (e) {

var $this = $(this);

var flag = true;

//遍历子类

$this.find("*").each(function () {

//查看有没有子类触发过active动作

if ($(this).hasClass("active")) flag = false;

});

//如果子类已经触发了active动作，父类则取消active触发操作

if (flag) $this.addClass("active");

});

$(document).on("touchmove", ".action-btn:not(.disable)", function (e) {

if ($(this).hasClass("active")) $(this).removeClass("active");

});

$(document).on("touchend", ".action-btn:not(.disable)", function (e) {

if ($(this).hasClass("active")) $(this).removeClass("active");

});

});