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)
    

      

  • 相关阅读:
    uniq命令
    全局滚动条样式美化
    感受一下Java乱码出现就知道怎么解决Java乱码了
    用于注解解析的工具类
    迅为i.MX8MM开发板资料更新啦!Linux安卓9.0工业核心板
    迅为-IMX6Q开发板Buildroot文件系统nfs测试
    进步一点点丨迅为4412开发板Linux内核开发基础
    迅为RK3399开发板运行第一个Android程序
    每天学习一点丨借助U盘或TF卡拷贝程序到迅为IMX6ULL开发板上(二)
    资料完整丨i.MX6Q开发板ARM恩智浦工业级linux安卓系统迅为iMX6Q/DL Plus板
  • 原文地址:https://www.cnblogs.com/xsk-style/p/6288253.html
Copyright © 2011-2022 走看看