淡入淡出图片

逃离我推掉我的手 2022-07-14 11:20 242阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <style>
          img{
             filter :alpha(opacity:30);
             opacity:0.3;
          }
    
       </style>
    </head>
    <body>
       <script>
       window.onload=function () {
         var timer=null;
         var alpha=30;
         var img=document.getElementById('img1');
         function startMove(target){
              clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
             if(alpha<target){
                 speed=10;
             }else{
                 speed=-10;
               };
             if(alpha==target){
                 clearInterval(timer);
             }else{
                 alpha+=speed;
                 img.style.filter='alpha(opacity:"+alpah+")';
                 img.style.opacity=alpha/100;
             }
            },30)
          }
    
            img.addEventListener('mouseover',function(){
             startMove(100)},false);
            img.addEventListener('mouseout',function(){
                startMove(30)},false);
    
        }
    
       </script>
       <img src="pic1.png" id='img1' alt="">
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 图片淡入淡出效果

html源码： css源码： .fadeImg \{ width: 100px; height: 100px; background: red; \-we

客官°小女子只卖身不卖艺/ 2023年01月16日 09:51/ 0 赞/ 138 阅读

相关 39、JavaScript的运动----淡入淡出的图片

1、JavaScript的运动----淡入淡出的图片 1.1 透明度的兼容性写法 1.2 利用变量来保存透明度的变化 1.3 代码

分手后的思念是犯贱/ 2022年09月21日 13:07/ 0 赞/ 141 阅读

相关淡入淡出图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

逃离我推掉我的手/ 2022年07月14日 11:20/ 0 赞/ 243 阅读

相关 Dotween 淡入淡出循环效果

最重要的一代码：物体.GetComponent<Renderer>().material.DOFade(1,1).SetLoops(-1,LoopType.Yoyo); 获

深碍√TFBOYSˉ_/ 2022年06月15日 04:19/ 0 赞/ 875 阅读

相关图片的效果（淡入淡出。。。。。。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年06月07日 05:20/ 0 赞/ 280 阅读

相关 jQuery动画效果——淡入淡出

-------------------- 任务描述本关任务：掌握jQuery常见的动画效果——淡入淡出。效果图如下： ![206413][] 相关知识为了完成本关

桃扇骨/ 2022年04月05日 13:20/ 0 赞/ 348 阅读

相关 js图片轮播（淡入淡出）

> 关于图片轮播，有太多的方法去实现，不同的样式，用的主要思想也不同，但不管怎么说，图片轮播离不开计时器。关于要注意的，要解释的，我都备注好了，说的可能不是很标准，但我尽量

素颜马尾好姑娘i/ 2022年03月25日 12:46/ 0 赞/ 276 阅读

相关 jQuery淡出淡入

jQuery淡出淡入　　淡入就是让元素按照指定的时间出现 (显示) 　　淡入就是让元素按照指定的时间隐藏格式: 　　淡入: fadeIn(时间,函数) 　

你的名字/ 2021年12月24日 06:19/ 0 赞/ 366 阅读

相关 Jquery------淡入淡出效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淡入淡

今天药忘吃喽~/ 2021年12月10日 10:04/ 0 赞/ 381 阅读

相关原生JS实现图片轮播--淡入淡出

本篇博客所实现的图片轮播是较为简单的一种轮播，轮播效果为固定的位置不同图片的切换，所以首先需要对页面进行简单的布置 HTML部分 <div class="b">

快来打我*/ 2021年10月24日 00:54/ 0 赞/ 470 阅读