PC端网页特效（JS)

最新推荐文章于 2024-05-30 11:27:58 发布

北木南-

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量147

点赞数

分类专栏：笔记 js 文章标签： javascript 动画 css3

本文链接：https://blog.csdn.net/LUZENG_SA/article/details/120870262

版权

js 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

笔记

9 篇文章 0 订阅

订阅专栏

元素偏移量offset系列

元素可视区client系列

立即执行函数

一般是用第一种方式

flexible.js

元素滚动scroll系列

mouseenter和mouseover的区别

动画函数封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">点击夏雨荷到500</button>
    <button class="btn800">点击夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function() {
            // 调用函数
            animate(span, 500);
        })
        btn800.addEventListener('click', function() {
                // 调用函数
                animate(span, 800);
            })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>
</body>

</html>

常见网页特效案列

轮播图

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
            color: gray;
        }
        .dao-l {
            display: none;
            background-color: rgba(0, 0, 0, .4);
            position: absolute;
            top: 50%;
            margin-top: -15px;
            left: 0;
            width: 30px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            z-index: 2;
        }
        .dao-l:hover {
            font-size: 17px;
        }
        .dao-r {
            display: none;
            background-color: rgba(0, 0, 0, .4);
            position: absolute;
            top: 50%;
            margin-top: -15px;
            right: 0;
            width: 30px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            z-index: 2;
        }
        .dao-r:hover {
            font-size: 17px;
        }
        div {
            overflow: hidden;
            position: relative;
            width: 721px;
            height: 455px;
            margin: 200px auto;
            background-color: skyblue;
        }
        .image {
            position: absolute;
            width: 600%;
        }
        .image li{
            float: left;
        }
        div ol {
            position: absolute;
            left: 50%;
            margin-left: -29px;
            bottom: 20px;
            width: 58px;
            height: 14px;
            background-color: rgba(255, 255, 255, .7);
            border-radius: 7px;
        }
        div ol li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 4px;
            margin: 3px;
        }
        .current {
            background-color: orange;
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            margin: 3px;
        }
    </style>
        <script src="JS/animate.js"></script>
        <script src="JS/轮播图2.js"></script>
</head>
<body>
    <div>
        <!-- 左按钮 -->
        <a class="dao-l" href="#"><</a>
        <!-- 右按钮 -->
        <a class="dao-r" href="#">></a>
        <!-- 滚动图片 -->
        <ul class="image">
            <li>
                <a  href="">
                    <img src="images/focus1.png" alt="">
                </a>
            </li>
            <li>
                <a  href="">
                    <img src="upload/focus2.jpg" alt="">
                </a>
            </li>
            <li>
                <a  href="">
                    <img src="upload/focus3.jpg" alt="">
                </a>
            </li>
            <li>
                <a  href="">
                    <img src="upload/focus1.jpg" alt="">
                </a>
            </li>
        </ul>
        <!-- 小圆圈 -->
        <ol>
        </ol>
    </div>
</body>
</html>

JS:animate和事件

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

window.addEventListener('load', function(){
    // 获取元素
    var daoleft = document.querySelector('.dao-l');
    var daoright = document.querySelector('.dao-r');
    var div = document.querySelector('div');
    // 注册事件：让鼠标经过div就显示按钮，移动出去就隐藏按钮
    div.addEventListener('mouseenter',function(){
        daoleft.style.display = 'block';
        daoright.style.display = 'block';
        // 清除定时器
        clearInterval(timer);
        timer = null;
    })
    div.addEventListener('mouseleave',function(){
        daoleft.style.display = 'none';
        daoright.style.display = 'none';
        // 调用计时器
        timer = setInterval(function(){
            daoleft.click();
        },2000)
    })
    // 动态生成小圆圈，有几个图片就有几个小圆圈
    var ul = div.querySelector('ul');
    var ol = document.querySelector('ol');
    // 每张图片宽度
    var divw = div.offsetWidth;
    // for循环获取小圆点个数
    for(var i = 0; i < ul.children.length; i++) {
        // 创建li
        var li = document.createElement('li');
        // 记录当前索引号
        li.setAttribute('index', i);
        // 插入li
        ol.appendChild(li);
        // 给li绑定点击事件
        li.addEventListener('click', function(){
            // 排他思想
            for (var j = 0; j < ol.children.length; j++){
                ol.children[j].className = '';
            }
            this.className = 'current';
            // 当我们点击小li就拿到索引号
            var index = this.getAttribute('index');
            // 设置动画时要记得添加定位，不然不能移动
            animate(ul,-index * divw);
            // 将小圆点索引号给左按钮计数器，就是为了点完小圆点后，点击按钮也可以正常运行
            num = circle = index;
        })  
    }
    ol.children[0].className = 'current';

    // 复制ul第一张图片放在ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    // 左按钮绑定点击事件，让图片移动
    // num是点击左侧按钮的计数器，circle是点击小圆点的计数器
    var num = 0;
    var circle = 0;
    // 节流阀
    var flag = true;
    daoleft.addEventListener('click', function(){
        if (flag) {
            flag = false;
            if (num == ul.children.length-1){
                ul.style.left = '0';
                num = 0;
            }
            num++;
            animate(ul,-num * divw,function(){
                flag = true;
            });
            circle ++;
            // 因为图片比小圆圈多一个，所以得先做一个判断，若是到最后一张就改变计数器的值，
            // 让他回到第一个点
            if (circle == ul.children.length-1){
                circle = 0;
            }
            // 排他思想，先清除别人样式在改变自己样式
            circlechange();
        }
    })
    // 点击右侧按钮事件
    daoright.addEventListener('click', function(){
        if (flag) {
            flag = false;
            if (num == 0){
                num = ul.children.length-1;
                ul.style.left = -num*divw+'px';
            }
            num--;
            animate(ul,-num * divw,function(){
                flag = true;
            });
            circle --;
            // 刚刷新，小圆点本身就是0，在减1就是负数，所以这里是小圆点索引值小于0
            // if (circle < 0){
            //     // ol孩子长度是4，而小圆点索引值最大是3，所以ol.children.length要减1
            //     circle = ol.children.length-1;
            // }
            circle = circle < 0? ol.children.length-1 : circle;
            circlechange();
        }
    })
    function circlechange () {
            // 排他思想，先清除别人样式在改变自己样式
            for (var j = 0; j < ol.children.length; j++){
                ol.children[j].className = '';
                }
            ol.children[circle].className = 'current';
    }
    // 轮播图自动播放定时器
    var timer = setInterval(function(){
        daoleft.click();
    },2000)
})