javascript 特效(js特效制作教程)

《javascript 特效(js特效制作教程)》

在网页开发中，JavaScript特效可以为页面增添活力与交互性。要实现这些特效，要确定想要达到的效果，例如动画、元素的动态显示隐藏等。然后根据效果选择合适的方法，利用JavaScript操作DOM元素、样式或结合CSS动画属性等。

一、简单的淡入淡出效果

（一）解决方案

当需要让一个元素逐渐显示（淡入）或者逐渐消失（淡出）时，可以通过改变元素的透明度来实现。

html
</p>



    
    
    <title>淡入淡出特效</title>
    
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;/* 初始状态隐藏 */
        }
    


    <button id="btn">点击我</button>
    <div id="box"></div>
    
        let box = document.getElementById('box');
        let btn = document.getElementById('btn');

        // 淡入函数
        function fadeIn(){
            let opacity = 0;
            let timer = setInterval(function(){
                if(opacity >= 1){
                    clearInterval(timer);
                    return;
                }
                opacity += 0.05;
                box.style.opacity = opacity;
                box.style.display = 'block';
            },30)
        }

        // 淡出函数
        function fadeOut(){
            let opacity = 1;
            let timer = setInterval(function(){
                if(opacity <= 0){
                    clearInterval(timer);
                    box.style.display = 'none';
                    return;
                }
                opacity -= 0.05;
                box.style.opacity = opacity;
            },30)
        }

        btn.onclick = function(){
            if(box.style.display === 'none'){
                fadeIn();
            }else{
                fadeOut();
            }
        }
    



<p>

（二）思路解释

这里定义了两个函数fadeIn和fadeOut，分别用于实现淡入和淡出。
在淡入时，通过设置定时器不断增大元素的透明度（从0到1），并且将元素的display属性设置为block使其显示出来。
淡出则是相反的操作，不断减小透明度，最后将display设置为none隐藏元素。

二、图片轮播特效

（一）解决方案

对于图片轮播，可以创建一个包含多张图片的容器，通过控制当前显示的图片索引来切换图片。

html
</p>



    
    
    <title>图片轮播特效</title>
    
        .carousel{
            width: 400px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }
        .carousel img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    


    <div class="carousel">
        <img src="img1.jpg" alt="">
        <img src="img2.jpg" alt="">
        <img src="img3.jpg" alt="">
    </div>
    
        let imgs = document.querySelectorAll('.carousel img');
        let index = 0;

        function showImg(){
            for(let i = 0;i= imgs.length){
                index = 0;
            }
            showImg();
        }

        setInterval(autoPlay,2000);
        showImg();/* 页面加载时先显示张图片 */
    



<p>