js 实现图片透明度变化

最新推荐文章于 2024-06-11 15:56:33 发布

weixin_30525825

最新推荐文章于 2024-06-11 15:56:33 发布

阅读量2.9k

点赞数 2

文章标签： javascript ui 前端 ViewUI

原文链接：http://www.cnblogs.com/water-wf/p/8574071.html

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
           #box{width: 200px;height: 200px;background-color: #f00;filter:alpha(opacity=30); opacity:0.3;}
        </style>
        <script>
        window.onload = function(){

           var timer =null,
               oBox = document.getElementById('box'),
               alpha =30;

           oBox.οnmοuseοver=function(){
                   move(100);
               }
               oBox.οnmοuseοut=function(){
                   move(30);
               }

           function move(target){
               clearInterval(timer);
               timer = setInterval(function(){

                   var speed =0;
                   if(alpha>target){
                       speed=-5;

                   }else{
                       speed=5;
                   };

                   if(alpha==target){
                       clearInterval(timer);
                   }else{
                       alpha+=speed;
                       oBox.style.filter = 'alpha(opacity='+alpha+')';
                       oBox.style.opacity = alpha/100;

                   };

               },30)

           }

        };
        </script>
    </head>
    <body>
       <div id="box"></div>
    </body>
</html>

转载于:https://www.cnblogs.com/water-wf/p/8574071.html

weixin_30525825

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js 实现图片透明度变化

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> #box{width: 200px;height: 200px;background-color: #f00;filter:alpha(opac...
复制链接

扫一扫