ontouchstart实现手机触屏中的hover成效
来源:互联网 发布:linux压缩命令 tar.gz 编辑:程序博客网 时间:2024/06/11 08:42
ontouchstart实现手机触屏中的hover效果
ontouchstart实现手机触屏中的hover效果
最近一直都在做手机网站的项目,会经常遇到手机屏幕触摸无交互效果,今天在一篇文章中看到模拟网页端hover效果的例子拿出来和大家分享下,已经使用效果还不错,大家可以根据下面的案例学下:
一、css样式:
<style type="text/css">
.inner { width: 100%; height: 100px; position: relative; }
.inner a { background: #000; display: block; color: #fff }
.inner a.hover { background: red; -webkit-tap-highlight-color: rgba(255,0,0,0);/*取消默认手机点击灰色框*/ }
</style>
.inner { width: 100%; height: 100px; position: relative; }
.inner a { background: #000; display: block; color: #fff }
.inner a.hover { background: red; -webkit-tap-highlight-color: rgba(255,0,0,0);/*取消默认手机点击灰色框*/ }
</style>
二、js代码
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>//引用jquery框架
<script type="text/javascript">
//请选引用jquery
$(function () {
$(".inner a").attr('ontouchstart', 'hover(this)');//hover效果
$(".inner a").attr('ontouchend', 'mouseout(this)');//秒除hover
})
function mouseout(obj) {
var className = "hover";
var _ecname = obj.className;
if (_ecname.length == 0) return;
if (_ecname == className) {
obj.className = "";return;
}
if (_ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
obj.className = _ecname.replace((new RegExp("(^|\\s)" + className + "(\\s|$)")), " ");
}
function hover(obj) {
if (!obj) return;
var className = "hover"
var _ecname = obj.className;
if (_ecname.length == 0) {
obj.className = className;return;
}
if (_ecname == className || _ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
return;
obj.className = _ecname + " " + className;
}
</script>
//请选引用jquery
$(function () {
$(".inner a").attr('ontouchstart', 'hover(this)');//hover效果
$(".inner a").attr('ontouchend', 'mouseout(this)');//秒除hover
})
function mouseout(obj) {
var className = "hover";
var _ecname = obj.className;
if (_ecname.length == 0) return;
if (_ecname == className) {
obj.className = "";return;
}
if (_ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
obj.className = _ecname.replace((new RegExp("(^|\\s)" + className + "(\\s|$)")), " ");
}
function hover(obj) {
if (!obj) return;
var className = "hover"
var _ecname = obj.className;
if (_ecname.length == 0) {
obj.className = className;return;
}
if (_ecname == className || _ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
return;
obj.className = _ecname + " " + className;
}
</script>
三、页面标签代码
<div class="inner">
<a href="#">ontouchstart实现手机触屏中的hover效果,请在首页页面测试查看效果</a>
</div>
1 0
- ontouchstart实现手机触屏中的hover成效
- Hover 手机端的实现
- 用js实现IE中的li:hover
- 敏捷开发中的成效评估模型
- 敏捷开发中的成效评估模型
- 安卓自定义Scrollview,实现卷帘成效
- hover中的小坑
- IE 下实现hover
- js实现hover事件
- jQuery中的hover方法教程
- 苹果手机无法识别hover的解决方案
- HTML:table中的td文字隐藏并实现hover显示全部文字
- table九宫格hover实现
- 【CSS实现hover动态效果】
- css3实现hover特效----案例
- hover
- hover
- hover
- spring mvc各种参数在jsp和action之间的传递
- poj3278
- 在C/C++代码中使用SSE等指令集的指令(2)参考手册
- 修改frame值中的某一个属性的值
- Python编写微信打飞机小游戏(四)
- ontouchstart实现手机触屏中的hover成效
- Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
- gdb 调试多进程
- 在C/C++代码中使用SSE等指令集的指令(3)SSE指令集基础
- Eclipse svn插件的使用
- java笔试算法题及答案
- spring mvc不能引入js等静态文件的解决办法
- 如何手动销毁surfaceview 并重建
- Redis String数据类型