原创

H5-js-控件左右抖动、震动效果

/**
 * 控件、元素左右抖动、震动效果
 * @param {Object} id 不加# 
 * @param {Object} shaketimes 震动次数默认为3
 */
function shakeTip(id, shaketimes) {
    var _idobj = document.getElementById(id);
    var _initdirect = true; //true表示向右
    var _offset = 5;
    var _st = shaketimes ? shaketimes : 3;
    var _timescount = 0; //计数
    var _set = setInterval(function() {
        if(_initdirect == true) {
            _offset = Math.abs(_offset);
        } else {
            _offset = -Math.abs(_offset);
        }
        _idobj.style.transform = "translate3d(" + _offset + "px, 0px, 0px)";
        _idobj.style.webkitTransform = "translate3d(" + _offset + "px,0px,0px)";
        _idobj.style.transitionDuration = '0.2s';
        _idobj.style.MozTransitionDuration = '0.2s';
        _idobj.style.webkitTransitionDuration = '0.2s';
        _initdirect = !_initdirect;
        if(_timescount == _st) {
            clearInterval(_set);
            _idobj.style.transform = "translate3d(0px, 0px, 0px)";
            _idobj.style.webkitTransform = "translate3d(0px,0px,0px)";
            _idobj.style.transitionDuration = '0.3s';
            _idobj.style.MozTransitionDuration = '0.3s';
            _idobj.style.webkitTransitionDuration = '0.3s';
        }
        ++_timescount;
    }, 300);
}

正文到此结束

所属分类：前端技术

本文标签： JavaScript 前端
本文链接： https://code.jiangjiesheng.cn/article/111
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

H5-js-控件左右抖动、震动效果

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息