手机网页中的hover效果实现

js文件

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>
$(function () {

$(".wrapper .record .r-main .r-more a").attr(‘ontouchstart‘, ‘hover(this)‘);
//hover效果

$(".wrapper .record .r-main .r-more a").attr(‘ontouchend‘, ‘mouseout(this)‘);
//秒除hover

})

</script>

  

时间: 2024-08-16 07:59:03

手机网页中的hover效果实现的相关文章

在手机网页中使用USEMAP

因为手机网页中图片大多数使用百分比显示 所以USEMAP的坐标错位 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js">&

网页中常用的效果

一.网页中常常需要显示天气: <iframe width="310" scrolling="no" height="25" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=40&icon=1&num=3"></iframe&

如何实现1920bannerai网页中居中以及实现1920bannerai网页中切换的效果

#banner{    /*宽度,浏览器的100%*/    width: 100%;    /*原则上,高度=图片高度*/    height: 500px;    position: relative;    overflow: hidden;   }   #banner img{    /*宽度,图片的实际高度*/    width: 1920px;    /*高度,充满父容器*/    height: 500px;    /*使用定位,让图片在父容器绝对居中*/    position:

手机网页中,长按会触发系统事件,怎么取消这些事件?

给要取消系统事件的元素加上如下css .test { -webkit-user-select: none; -moz-user-select: none; }

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样的网页是怎样改制作出来的呢?今天我们就来探讨一下这个问题 阅读读者具备基础 1.熟练的使用HTML和CSS 2.对HTML5和CSS3有一定的了解,这个不必深入 3.掌握JavaScript.jquery脚本语言 如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看,要不然可能会跟不上下面的学习了 HTML的

手机网页版知乎内容隐藏效果的实现

看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减少了滑动时间,用户体验很好,对整个页面有一个大概的预览,强迫症会感觉很爽. 具体怎么实现这个效果,分析一下: 可以看出来是一个渐变的效果,从上往下颜色变白,我们知道在css3中有两种渐变:线性(linear-gradient)和径向(radial-gradient),很明显这里属于线性渐变. 渐变这

Web页面中5种超酷的Hover效果

hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微 差强人意,所以请使用FireFox,Safari或者Chrome查看一下的效果.如下就是要介绍的5个非常酷的纯CSS hover 效果. 1. 向上跳跃 Click Here to Launch

HTML页面中5种超酷的伪类选择器:hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点. 给平淡的站点带来活力 hover效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微差强人意,所以请使用FireFox,

通过定位实现的div块网页中固定效果

通过定位实现的div块网页中固定效果:本章节介绍一下如何让通过定位方式让一个div定位于网页的一个位置,无论是否拖动滚动条.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂