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>
    
  • 相关阅读:
    sql-定义变量
    sql-逻辑循环while if
    iOS生命周期
    iOS系统架构
    SVN记住密码
    视图在控制权限的作用
    20140524数据库课笔记
    char和varchar区别
    多表查找
    create table约束
  • 原文地址:https://www.cnblogs.com/lvmylife/p/4565238.html
Copyright © 2011-2022 走看看