51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
视频课免费课排行榜短视频直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

3D爆炸焦点图

深处莫神
发布于 2022-8-15 14:44
1.8w浏览
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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.

分类
其他
标签
jQuery
赞
收藏
回复
举报


回复
    相关推荐
    这个用户很懒，还没有个人简介
    觉得TA不错？点个关注精彩不错过
    帖子
    视频
    声望
    粉丝
    最近发布
    热门推荐
    【有奖互动活动】# HarmonyOS 连接·突破# 我在现场活动​ 96回复
    #HarmonyOS连接·突破# 问题征集活动 40回复
    鸿蒙Flutter开发知识地图 0回复
    鸿蒙性能优化之卡顿优化 1回复
    待到山花烂漫时：鸿蒙开发者的个人感悟 1回复
    相关问题
    XComponent、openGL实现3D图形绘制 1回答
    HarmonyOS 3D卡片遮挡滑动实现方式 1回答
    HarmonyOS 能否支持3D模型导入？ 0回答
    deveco studio里面可以实现3D场景的效果吗？ 1回答
    有谁知道是否支持实现3D效果 1回答
    社区精华内容

    目录