特效Duang！！！----让控件抖一抖

来源：互联网发布：js改变浏览器窗口大小编辑：程序博客网时间：2024/06/14 12:08

在登录的时候，想到让登录失败或者没有输入的文本框在检查出错误的时候用抖一抖来提醒用户填错了，然后就百度查找，最后找到一个特别好玩的js代码，非常简单，来围观一下。

注意：运行该代码要引入JQuery的JS

关键JS代码 wintrue.js

/* *  * 控件震动动画 * obj控件 * time震动时间长——短循环长度 * wh震动幅度px * fx动画速度s */function flash(obj,time,wh,fx){     $(function(){    var $panel = $(obj);    var offset = $panel.offset()-$panel.width();    var x= offset.left;    var y= offset.top;    for(var i=1; i<=time; i++){        if(i%2==0)        {            $panel.animate({left:'+'+wh+'px'},fx);        }else        {            $panel.animate({left:'-'+wh+'px'},fx);        }    }    $panel.animate({left:0},fx);    $panel.offset({ top: y, left: x });    })}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>INPUT输入框抖动特效插件wintrue</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>#login-right{border: 1px solid #FFBE7A;zoom: 1;width:400px;padding: 8px 10px;line-height: 20px;margin-left:auto;margin-right:auto}</style></head><body>    <div id="login-right" >        <form action="#" method="post" onSubmit="return check()">              <dl class="login-pannel">                <dd>                  昵称：<input type="text"  name="uname" id="uname" /><br><br>                </dd>                <dd>                  密码：<input type="password" name="pwd" id="pwd"/><br><br>                </dd>                <dd >                  <input type="button" id="demo" value="让DIV摆动" />                  <input type="button" id="demo1" value="让控件摆动" />                  <input type="button" id="demo2" value="让自己摆动" />                </dd>                <dd >                  <input type="button" id="demo3" value="让控件摆动幅度大点" />                  <input type="button" id="demo4" value="让控件摆动时间久点" />                  <input type="button" id="demo5" value="让控件摆动速度飞快" />                </dd>              </dl>      </form>    </div></body><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="js/wintrue.js"></script><script>$(function(){    var user=document.getElementById('uname');    var pwd=document.getElementById('pwd');    $("#demo").click(function(){        flash('#login-right',8,10,100);    });    $("#demo1").click(function(){        flash('#uname',8,10,100);        $("#uname").focus();        $("#uname").css({ background: "#FFFF66" });    });    $("#demo2").click(function(){        flash(this,8,10,100);    });    $("#demo3").click(function(){        flash("#login-right",8,30,100);    });    $("#demo4").click(function(){        flash("#login-right",20,10,100);    });    $("#demo5").click(function(){        flash("#login-right",15,15,50);    });})</script>

总结：这些小功能都挺好玩的，以后要多多总结！

阅读全文

0 0