zoukankan      html  css  js  c++  java
  • js动画(二)

    嗯,今天好冷,特别冷,我的手指,都冻的打不了字了。今天一件特别的傻的事就是,在 for(var i;i<obj.length;i++){}

    找了半天没有注意到 var i 没有赋值。够150 了吧。

    直接上货吧!!!

    哎,还没有够150 ,那就再搞一个吧,当与彩蛋。

    用一个方法直接获取样式值

    function getStyle(obj,attr){/*obj对象,就是你要搞哪个元素,attr属性,你要搞哪个的属性*/

          if(obj.currentStyle){

             return obj.currentStyle[attr];/*.currentStyle针对IE*/

          }

          else{

            return getComputedStyle(obj,flase)[attr];/* getComputedStyle针对firebox浏览器*/

          }

    }

    多物体变速(匀速)运动

     

    <script>
    		window.onload=function(){
    			var ind = document.getElementsByTagName("li");
    			for(var i=0;i<ind.length;i++){/*取到多个物体*/
    				ind[i].timer=null;/*当遇到多个对象时,最好不用全局变量,可能会发生争夺现象*/
    				ind[i].onmouseover = function(){
    					onMove(this,400,10); /*这里控制,对象,目标值,速度*/
    				}
    				ind[i].onmouseout = function(){
    					onMove(this,200,-10);
    				}
    			}
    		}
    		function onMove(obj,mu,speed){
    			clearInterval(obj.timer);
    			
    			obj.timer=setInterval(function(){
    				
    			speed=(mu-obj.offsetWidth)/8;
    			speed=speed>0?Math.ceil(speed):Math.floor(speed);
    			/*变速在这里,两行,删除直接是 匀速*/
    if(obj.offsetWidth == mu) { clearInterval(obj.timer); } else{ obj.style.width=obj.offsetWidth+speed+"px"; } },30) } </script>

    多物体透明度运动

    <script>
    		window.onload=function(){
    			var opp = document.getElementsByClassName("page");
    			for(var i=0;i<opp.length;i++){
    				
    				opp[i].timer=null;
    				opp[i].a=30; /*透明度,没有直接获取当前透明度的方法,所以自生成*/
    				
    				opp[i].onmouseover = function(){
    					onStart(this,100,5);/*这里控制对象,目标值,速度*/
    				}
    				opp[i].onmouseout = function(){
    					onStart(this,30,-5);
    				}
    			}
    		}
    		function onStart(obj,mu,speed){
    			clearInterval(obj.timer);
    			obj.timer=setInterval(function(){
    				if(obj.a == mu){
    					clearInterval(obj.timer);
    				}
    				else{
    					obj.a+=speed;
    					obj.style.opacity=(obj.a)/100;
    				}
    			},10)
    

      

  • 相关阅读:
    Json-lib使用 转载
    利用PinYin4j 实现List中的对象按数字,字母, 汉字排序
    web 模板 类似京东左侧的导航栏
    常见挂马方式
    JS挂马攻防
    代码中的202.102.100.100
    利用Jquery获取、设置iframe中元素
    [PHP]基本排序(冒泡排序、快速排序、选择排序、插入排序、二分法排序)
    js验证输入的金钱格式
    js获取当前对象的颜色判断改变颜色
  • 原文地址:https://www.cnblogs.com/xsk-style/p/6288253.html
Copyright © 2011-2022 走看看