js动画

Posted 2020-08-28 xiao_style

咳咳咳咳，感冒了感冒了，鼻塞，蓝瘦啊！嘴巴也开裂，哎，心疼自己。想到这是第三只唇膏了！只怪，放荡不倔爱自由，

行驶在冷风路上么，北风那个吹啊吹啊吹啊，好了，发神经发完了，接下来进入正题，严肃脸。（字数150应该凑够了。）

js链式运动

 

代码如下 ：

<style>
		#lia {
			width: 200px;
			height: 100px;
			background: red;
			opacity: 0.3;
		}
	</style>
	<script>
		window.onload = function() {
			var qwe = document.getElementById("lia");
			qwe.timer = null;
			qwe.opacity=30;
                        /*以下，就是控制代码*/
			qwe.onmouseover = function() {
				onStart(qwe,"width",400,10,function(){/*这里控制，宽，目标值，速度，以及下一个动画*/
					onStart(qwe,"height",300,10,function(){/*这里控制，长，目标值，速度，以及下一个动画*/
                                               onStart(qwe,"opacity",100,10);/*这里控制，透明度，目标值，速度，以及下一个动画，当然以上顺序可以换*/

                                                                }); 
                                                    });
                         }

			qwe.onmouseout = function() {/*这里不解释，跟上面一样*/
				onStart(qwe,"opacity",30,-10,function(){
					onStart(qwe,"height",100,-10,function(){
						onStart(qwe,"width",200,-10);
					});
				});
			}
			
		}

		function getStyle(obj, attr) { /*obj对象，就是你要搞哪个元素，attr属性，你要搞哪个的属性*/
			if(obj.currentStyle) {
				return obj.currentStyle[attr]; /*.currentStyle针对IE*/
			} else {
			return getComputedStyle(obj,false)[attr]; /* getComputedStyle针对firebox浏览器*/			}
		}
                /*这个呢，是昨天的彩蛋，挺好用的，具体的功能就是，取对象的样式属性值，很好用*/
		function onStart(obj,attr, mu,speed,fn) {
			clearInterval(obj.timer);
			obj.timer = setInterval(function() {
				if(parseInt(getStyle(obj,"width")) == mu)
				{
					if(fn){
						fn()   /*这里就是，关键，就是执行下一个，函数的功能，我在这里创建一个空函数，
                                                  具体函数内容交给主函数来写，所以这个函数，再多传一个参数，来判断，
                                                  是否需要执行下一个函数*/
					}
					else{
						clearInterval(obj.timer);
					}
				}
				else if(parseInt(getStyle(obj,"height")) == mu)
				{
					if(fn){
						fn()
					}
					else{
						clearInterval(obj.timer);
					}
				}
				else if(obj.opacity == mu){
					     clearInterval(obj.timer);
					     if(fn){
					     	fn();
					     }
					}
				else{
					if(attr == "opacity"){
						obj.opacity+=speed;
						obj.style.opacity = obj.opacity/100;
					}
					else if(attr == "width"){
						obj.style.width = parseInt(getStyle(obj,"width"))+speed+"px";
					}
					else if(attr == "height"){
						obj.style.height = parseInt(getStyle(obj,"height"))+speed+"px";
					}
                                /*这里就是把三个功能给他合成在一个函数里，所以上述的fn(),执行的函数还是本身，只不过选择不同功能罢了 
                                 
                                  这里其实还可以优化，前面提到getStyle()，可以取到，对象的样式属性值，所以，可以把height和width整合起来。
                                */
				}
			}, 30)
		}
	</script>

今天为什么把css的代码也放上来呢？

 

 

 

 

 

 

 

 

 

 

 

只是手误而已，嘿嘿嘿。若尝试有问题，对比css解决。