zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    Rotate to Attend: Convolutional Triplet Attention Module
    论文阅读:《Automatic Change Detection in Synthetic Aperture Radar Images Based on PCANet》
    论文阅读:Change Detection From Synthetic Aperture Radar Images Based on Channel Weighting-Based Deep Cascade Network
    第二次作业:卷积神经网络 part 2
    CGAN和DCGAN
    GAN
    About me
    极大似然估计与贝叶斯估计
    支持向量机(一)
    非参数估计——Parzen窗与k近邻估计
  • 原文地址:https://www.cnblogs.com/kiter/p/2922242.html
Copyright © 2011-2022 走看看