前端实践--JavaScript--动画（二）-js教程-PHP中文网

前端实践--JavaScript--动画（二）

黄舟

发布： 2016-12-30 16:29:08

原创

1215人浏览过

透明度动画

实现效果：当数遍移动到图片上时。图片发生渐变效果；当鼠标离开时，恢复原图效果。

解答：

v3.0 S-CMS企业建站系统(含小程序)

S-CMS政府建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用ASP+ACCESS/MSSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建

258

查看详情

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>透明度动画</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:200px;
            height:200px;
            background:red;
            filter:alpha(opacity:30);
            opacity:0.3;            
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function(){
                startMove(100);
            }
            oDiv.onmouseout = function(){
                startMove(30);
            }
        }
        var timer = null;
        var alpha = 30;
        function startMove(iTarget){
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = 0;
                if(alpha > iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(alpha == iTarget){
                    clearInterval(timer);
                }else{
                    alpha = alpha + speed;
                    oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                    oDiv.style.opacity = alpha/100;
                }
            },30)
        }
    </script>
</head>

<body>
    <div id="div1"></div>
</body> 
</html>

登录后复制

以上就是前端实践--JavaScript--动画（二）的内容，更多相关内容请关注PHP中文网（www.php.cn）！