zoukankan      html  css  js  c++  java
  • javascript提示抖动实现方法

    css代码:

    <style type="text/css">
    	#div1{ 200px; height:200px; background-color:orange; border:solid 5px #f0f0f0;  position:absolute; left:600px; top:200px;}
    </style>
    

     js代码:

    <script type="text/javascript">
    	window.onload=function(){			
    	  var oDiv=document.getElementById('div1');		
    	  oDiv.onclick=function(){
    		shake(oDiv,'left');
    	  }
    	}
    	//封装抖动方法
    	function shake(obj,attr){			
    	  var arr=[];
    	  var timer=null;
    	  var num=0;	
    	  var pos=parseInt(getStyle(obj,attr));		
    		
    	  //通过数组实现抖动的频率
    	  for(var i=20;i>0;i-=2){
    	    arr.push(i,-i);
    	  }
    	  arr.push(0);
    		
    	  //设置定时器实现抖动
    	  clearInterval(timer);
    	  timer=setInterval(function(){
    	    obj.style[attr]=pos+arr[num]+'px';
    	    num++;
    	    if(num==arr.length){
    		clearInterval(timer);
    	    }
    	  },20)
    	}
    		
    	//获取元素属性方法
    	function getStyle(obj,attr){
    	  return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
    	}	
    </script>
    

      HTML:

    <body>
    	<div id="div1"></div>
    </body>
    
  • 相关阅读:
    10. 正则表达式匹配(动态规划)
    8. 字符串转换整数 (atoi)
    5. 最长回文子串
    4. 寻找两个正序数组的中位数
    1109. 航班预订统计
    计算机网络面试整理
    HTTP 响应 代码
    Tomcat 安装 2019.1.20
    ubuntu 编译 jdk (三)
    ubuntu 编译 jdk (二)
  • 原文地址:https://www.cnblogs.com/lvmylife/p/4565238.html
Copyright © 2011-2022 走看看