JavaScript 淡出淡入效果并增加LEFT值实现移动到屏幕中间

最新推荐文章于 2021-06-03 10:50:45 发布

原创最新推荐文章于 2021-06-03 10:50:45 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端开发专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现元素淡入淡出效果的案例，并通过修改元素的LEFT值使其平滑移动到屏幕中央。代码适用于网页开发场景，特别是希望添加动态效果提升用户体验的项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 淡出淡入效果并增加LEFT值实现移动到屏幕中间</title>
<style>
#div1 { width:300px; height:300px; background:#72A86E; position:absolute; display:block; filter:alpha(opacity:0); opacity:0.0;}
</style>
<script>
// YuqiDai@G
window.onload = function(){
    
    var oInp = document.getElementsByTagName('input')[0];
    var oDiv = document.getElementById('div1');
    var Timer = null;
    var alpha = 0;
    var oLeft = 0;
    var oLeft2 = (document.documentElement.clientWidth/2) - (oDiv.offsetWidth/2);
    var iSeenp = 1;
    //alert(oLeft2);
    
    oInp.onclick = function(){
        clearInterval(Timer);
        Timer = setInterval(function(){
            if(alpha != 100 && oDiv.style.left != oLeft2){
                alpha += iSeenp;
                oDiv.style.filter = 'alpha(opacity:'+ alpha +')';
                oDiv.style.opacity = alpha/100;
                
                oLeft += oLeft2/(100/iSeenp); //计算同步
                oDiv.style.left = oLeft + 'px';
                
            }else{
                clearInterval(Timer);
                }
            },30)
        }
    }
</script>
</head>
<body>
<input type="button" value="弹窗" />
<div id="div1"></div>
</body>
</html>