• jQuery 闪动的文字提示


    声明,本文转自网上。

    jQuery 闪动的文字提示,仿QQ头像闪烁闪动提示,可以用于错误提示或其他吸引用户注意力的场合。
      shake(ele,cls,times)
      ele : jQuery Object [object] 要闪动的元素
      cls : Class Name [string] 闪动的类
      times : Number [Number] 闪动几次
      注意,必须调用jQuery1.4.2及以上版本,否则网页下角会提示错误。

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>QSL 社区闪动提示</title>
    <style> 
    	*{ margin:0; padding:0;}
    	body{ background:#fff; font-family:Arial, Helvetica, sans-serif; background:#f9f9f9; font-size:14px; color:#333;}
    	.main{ 600px; background:#fff; margin:0 auto; padding:20px 0; border:solid #ddd; border-0 1px; min-height:800px;}
    	.box{ 240px; height:26px; line-height:26px; background:#f0f0f0; border:1px solid #ddd; text-align:center; font-size:14px; margin:20px auto;}
    	input.box{ 240px; font-weight:900; color:#999; display:block; background:#fff; text-align:left;}
    	.red{ border:1px solid #d00; background:#ffe9e8; color:#d00;}
    	input.red{background:#ffe9e8;}
    	#box1{ cursor:pointer;}
    	.des{ margin:0 20px; padding:6px; line-height:20px; border:1px solid #ccc; color:#555;}
    </style>
    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
    <script> 
    	function shake(ele,cls,times){
    			var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;
    			if(t) return;
    			t= setInterval(function(){
    				i++;
    				c = i%2 ? o+cls : o;
    				ele.attr("class",c);
    				if(i==2*times){
    					clearInterval(t);
    					ele.removeClass(cls);
    					}
    				},200);
    			};
    			
    			
    	$(function(){
    		//domready 就闪动
    		shake($("#box"),"red",3);
    		//点击闪动
    		$("#box1").bind({
    			click:function(){
    				shake($(this),"red",3);
    				return false;
    				}
    			});
    		//通不过mail校验闪动
    		$("#mail").blur(
    			function(){
    				 if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) {
    						shake($(this),"red",3);
    					}
    				}
    			);
    			
    		});		
    </script>
    </head>
     <body>
     <div class="main">
        <p class="des">闪动提示,可以用于错误提示或其他吸引用户注意力的场合 <br>
            shake(ele,cls,times)<br>
            ele : jQuery Object [object]  要闪动的元素<br>
            cls : Class Name [string] 闪动的类<br>
            times : Number [Number] 闪动几次
        </p>
    <div id="box" class="box">打开就闪动</div><div id="box1" class="box">点击就闪动</div>
    <input class="box" type="email" id="mail" placeholder="不是email地址就闪动" />  
    </div>
    </body>
    </html>
    
  • 相关阅读:
    Warning! PATH is not properly set up...
    用rvm切换ruby
    Mac下多版本JDK安装
    iOS开发 密码里面含有特殊字符如何处理传给后端
    Cornerstone版本回退160013错误
    iOS 11 Xcode9 tableview点击cell上的按钮cell自动往上跳动
    iOS 获取全部字体的Fontfamily和FontName
    iOS WKWebView 点击超链接跳转至Safari
    iOS 11在window上加视图不显示
    Java并发(2)
  • 原文地址:https://www.cnblogs.com/kiter/p/2922242.html
Copyright © 2020-2023  润新知