关闭

jQuery--元素抖动效果的简单实现

标签: jQueryhtml
229人阅读 评论(0) 收藏 举报
分类:

效果:验证错误时,元素左右抖动
抖动效果图

实现步骤:

1.导入:jquery-1.11.3.min.js

 <script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-1.11.3.min.js"></script>

2.被抖动元素

<div id="login-err" class="login-err">请输入正确的帐号或密码</div>
//样式
.login-err {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    border-radius: 4px;
    background: #ffeaea none repeat scroll 0 0;
    border: 1px solid #e5c3c4;
    color: #b94a48;
    line-height: 38px;
}

3.抖动函数

    function shake(o){
        var $panel = $("#"+o);
        box_left = 0;
        //box_left = $panel.css('left');
        //box_left = ($(window).width() -  $panel.width()) / 2;
        $panel.css({'left': box_left,'position':'relative'});
        for(var i=1; 4>=i; i++){
            $panel.animate({left:box_left-(20-5*i)},30);
            $panel.animate({left:box_left+(20-5*i)},30);
        }
    }

4.调用函数

shake("login-err");

已经是全部了
说明:关键就是抖动函数,需要注意的是,被注释那里是根据浏览器可视窗口的宽度来调节元素位置的,所以抖动会受到浏览器可视窗口的大小影响,改进后用相对位置定位元素,问题得到解决。
更改元素样式为相对定位,position:relative;,然后利用letf属性来调节位置,因此,left:20会向元素的 LEFT 位置添加 20 像素。
animate为jQuery包装集操作函数,第一个参数调节left属性,第二个参数表示持续的时间,单位毫秒。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7462次
    • 积分:139
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档
    最新评论