移动端iPad浏览器Safari按钮动态按压效果
更新:2018-01-25 08:24:35
人气:4831
来源:本站原创
A+
平时在PC端开发页面,通过CSS样式的hover就可以实现按钮的效果,但转移到手机移动端是就无法实现了,如何解决呢?
.abc{border:0; width:480px; height:170px; transition: width .2s; -moz-transition: width .2s; /* Firefox 4 */ -webkit-transition: width .2s; /* Safari 和 Chrome */ -o-transition: width .2s; /* Opera */ } .abc:active { width:450px; }
<img src="images/pad-1.png" class="abc" />
以上是CSS代码和图片绑定的abc样式。但是转到移动端就没有效果了,如何实现呢?添加以下代码就可以解决:
<script> document.body.addEventListener('touchstart', function (){}); </script>
一般能在网上查到的解决办法都是这个,但大都容易忽略一个问题
<body touchstart>
一定要在body中加入touchstart才能真正有效果。
推荐的文章
随手记
- ● blob:http地址的原理及生成方法
- ● 华视CVR100系统身份证读卡器web驱动安装不识别解决办法
- ● web应用采用webcam实现拍照上传的PHP示例及参数说明
- ● PHP实现直播推流功能
- ● win10开机后屏幕黑屏只有鼠标但能启动任务管理器
- ● base64.js文件下载及使用方法说明
- ● windows利用bat微信双开、多开
- ● 百度API提交推送报{"error":401,"message":"tokenisnotvalid"}什么原因
- ● 如果在调用创建群接口时没有保存OpenConversationId,可以通过调用本接口通过chatId获取OpenConversationId
- ● Windows中使用BAT文件设置指定IP地址或自动获取IP
PHP经验分享
- ● MySQLSUM在没有符合查询条件时返回结果为空的处理办法
- ● 如何开启PHP8的JIT提升运行速度
- ● 钉钉API接口-用PHP+Curl实现获取用户信息
- ● 钉钉API接口-用PHP+Curl实现获取应用Access_Token
- ● 在PHP中使用CURL,“撩”服务器只需几行——phpcurl详细解析和常见大坑
- ● MySQLInnodb并发涉及参数说明
- ● mysql参数调优之innodb_thread_concurrency、innodb_concurrency_tickets合理的使用cpu性能
- ● PHP用fsockopen检测指定IP端口是否开启可用
- ● PHP用socket检测服务器IP端口是否开放?代码示例
- ● GatewayWorker报错:Waring:Events::onMessageisnotcallable