3D爆炸焦点图

深处莫神

发布于 2022-8-15 14:44

浏览

0收藏

3D爆炸焦点图-鸿蒙开发者社区

知识点：
1.nth-of-type可以选择指定类型的元素，可看nth-of-type的属性和用法

3D爆炸焦点图

思路：
1.可以在网上找到关于3D爆炸焦点图的js文件（jquery-bomb.min.js）
2.直接调用函数即可

<!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>3D爆炸图</title>
    <link rel="stylesheet" href="./assets/css/bomb.css">
</head>

<body>
    <div class="banner">
        <ul>

            <li>
                <a href="index.html#">
                    <img src="./assets/img/1.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="index.html#">
                    <img src="./assets/img/2.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="index.html#">
                    <img src="./assets/img/6.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="index.html#">
                    <img src="./assets/img/4.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="index.html#">
                    <img src="./assets/img/5.jpg" alt="">
                </a>
            </li>

            <li>
                <a href="index.html#">
                    <img src="./assets/img/6.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

<script src="./assets/js/jquery-1.9.1.min.js"></script>
<script src="./assets/js/jquery-bomb.min.js"></script>
<script>
    $(function () {
        $(".banner").bomb()
    })
</script>

分类

其他

标签

jQuery