右下角弹窗

最新推荐文章于 2025-05-10 09:09:01 发布

最新推荐文章于 2025-05-10 09:09:01 发布 · 138 阅读

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文探讨了如何使用JavaScript创建动画效果，并通过设置定时器来实现元素位置的平滑过渡，展示了一个简单而实用的动画实例。


function show(){
        	var div = document.createElement("div");
        	div.id = "xxx";
        	div.innerHTML = "<h3>wowo</h3>"
        	div.style.cssText = "position:fixed;bottom:-1000px;right:0;width:100px;height:100px;border:1px solid #000;background-color:#ccc;";
        	document.body.appendChild(div);
        	animation();
        }
        function animation(){
        	var el = document.getElementById("xxx"),
        		h = parseInt(el.clientHeight,10);

        	el.style.bottom = -h + "px";	
        	setTimeout(function(){
        		var b = parseInt(el.style.bottom,10);
        		b += 5;
        		el.style.bottom = b + "px";
        		if(b <= 0){
        			setTimeout(arguments.callee,50);
        		}else{
        			el.style.bottom = "0px";
        		}
        	},50);
        }