css基础--设计动画2(滑动和渐隐渐显)

本文介绍如何使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值