css基础--设计动画2（滑动和渐隐渐显）

最新推荐文章于 2025-06-10 16:46:41 发布

原创最新推荐文章于 2025-06-10 16:46:41 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#移动、滑动实现 #渐隐渐显

css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现元素的滑动和渐隐渐显动画效果，详细讲解了通过动态修改元素坐标实现滑动，以及通过调整透明度实现渐隐渐显的技术细节。

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

滑动：主要是通过动态修改元素的坐标来实现，技术点如下：

1.考虑元素的初始化坐标、最终坐标，以及移动坐标等定位要素

2、移动的速度、频率等问题

<style type="text/css">
           .block{
               width:20px;height:20px;
               position:absolute;
               left:20px;top:200px;
               background-color: red;
           }
       </style>
   </head>
   <body>
       <div class="block" id="block1">

       </div>
       <script type="text/javascript">
           function getStyle(e,n){//e表示元素，n表示属性名，如“width”、“borderColor”
               if(e.style[n]){//若果在style中显示定义
                   return e.style[n];
                   }else if(e.currentStyle){//否则，在IE
                       return e.currentStyle[n]
                   }else if(document.defaultView&&document.defaultView.getComputedStyle){//非ie(DOM标准)
                       n=n.replace(/([A-Z])/g,"-$1");//转换参数的属性名 borderColor--> border-Color
                       n=n.toLocaleLowerCase();//border-Color-->border-color
                       var s= document.defaultView.getComputedStyle(e,null);
                       if(s){
                           return s.getPropertyValue(n)
                       }
                   }else{
                       return null;//如果不支持，返回null
                   }
           }
           function getB(ele){//绝对定位的坐标值
               return {
                   "x":(parseInt(getStyle(ele,"left"))||0),
                   "y":(parseInt(getStyle(ele,"top"))||0)
               }
           }
       //简单的滑动函数：通过指向元素、移动的位置，以及移动的步数，可以设计一个按一定速度吧元素从当前位置移动的指定的位置
       function slide(ele,x,y,t){//x和y表示要移动的最后坐标位置（相对包含块），t表示元素移动的步数
           var t=t||100;//初始化步数，越大速度越慢
           var o=getB(ele);//当前元素的绝对定位坐标
           var x0=o.x;
           var y0=o.y;
           var stepx=Math.round((x-x0)/t);//计算x轴每次移动的步长，由于像素点不能用小数，所以会产生一定的误差
           var stepy=Math.round((y-y0)/t);
           var out= setInterval(function(){//设计定时器
               var o=getB(ele);//获取移动后的绝对定位坐标值
               var x0=o.x;
           var y0=o.y;
           ele.style["left"]=(x0+stepx)+'px';
           ele.style["top"]=(y0+stepy)+'px';
           if(Math.abs(x-x0)<=Math.abs(stepx)||Math.abs(y-y0)<=Math.abs(stepy)){//若果距离终点坐标的距离小于步长，则停止执行循环，并校正元素的最终坐标位置
               ele.style["left"]=x+'px';
           ele.style["top"]=y+'px';
           clearTimeout(out);
           }
           },2)
       }

       temp1=document.getElementById("block1");
       slide(temp1,400,400,60);
       //注：使用时应该定义元素的绝对定位或相对定位显示状态，否则移动无效，在网页动画设计中，一般都使用这种定位移动的方式来实现

       </script>

渐隐渐显：

<head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .block{
               width:200px;height: 200px;background-color: red;
           }
       </style>
   </head>
   <body>
       <div class="block" id="block1">
       </div>
       <script type="text/javascript">
           function setOpactity(ele,n){//n表示一个数，0——100的数，若省略默认为100，即不透明
               var n=parseFloat(n);
               if(n&&(n>100)||!n)n=100;
               if(n&&(n<0))n=0;
               if(ele.filters){
                   ele.style.filter="alpha(opacity="+n+")";
               }else{
                   ele.style.opacity=n/100;
               }
           }
           function fade(ele,t,io){//t表示渐隐渐显的速度，值越大，速度越慢，io表示渐隐或渐显方式，true为渐显
               var t=t||10;
               if(io){
                   var i=0;
               }else{
                   var i=100;
               }
               var out=setInterval(function(){
                   setOpactity(ele,i);
                   if(io){//根据渐隐或渐显方式决定执行效果
                       i++;
                       if(i>=100) clearTimeout(out);
                   }else{
                       i--;
                       if(i<=0) clearTimeout(out);
                   }
               },t);
           }
           ele=document.getElementById("block1");
           fade(ele,200,true);
//           fade(ele,200,false);
       </script>