JS 蜂窝布局效果

已于 2024-01-24 09:44:46 修改
阅读量563 收藏 10
点赞数 7
分类专栏： web前端 文章标签： javascript 开发语言 ecmascript
于 2024-01-24 09:37:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36405210/article/details/135814225
版权
本文介绍了如何使用CSS和JavaScript实现在蜂窝网格布局中，当鼠标悬停在图片上时图片放大并使其周围的图片缩小的动态效果，利用了flex布局和transform属性来实现图片的放大缩小。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜂窝布局</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app">
        <div class="contarner">
            <div class="item"><img src="https://picsum.photos/400?1"></div>
            <div class="item"><img src="https://picsum.photos/400?2"></div>
            <div class="item"><img src="https://picsum.photos/400?3"></div>
            <div class="item"><img src="https://picsum.photos/400?4"></div>
            <div class="item"><img src="https://picsum.photos/400?5"></div>
            <div class="item"><img src="https://picsum.photos/400?10"></div>
            <div class="item"><img src="https://picsum.photos/400?6"></div>
            <div class="item"><img src="https://picsum.photos/400?7"></div>
            <div class="item"><img src="https://picsum.photos/400?8"></div>
            <div class="item"><img src="https://picsum.photos/400?9"></div>
        </div>
        <div class="contarner">
            <div class="item"><img src="https://picsum.photos/400?11"></div>
            <div class="item"><img src="https://picsum.photos/400?12"></div>
            <div class="item"><img src="https://picsum.photos/400?13"></div>
            <div class="item"><img src="https://picsum.photos/400?14"></div>
            <div class="item"><img src="https://picsum.photos/400?15"></div>
            <div class="item"><img src="https://picsum.photos/400?110"></div>
            <div class="item"><img src="https://picsum.photos/400?16"></div>
            <div class="item"><img src="https://picsum.photos/400?17"></div>
            <div class="item"><img src="https://picsum.photos/400?18"></div>
            <div class="item"><img src="https://picsum.photos/400?19"></div>
        </div>
        <div class="contarner">
            <div class="item"><img src="https://picsum.photos/400?21"></div>
            <div class="item"><img src="https://picsum.photos/400?22"></div>
            <div class="item"><img src="https://picsum.photos/400?23"></div>
            <div class="item"><img src="https://picsum.photos/400?24"></div>
            <div class="item"><img src="https://picsum.photos/400?25"></div>
            <div class="item"><img src="https://picsum.photos/400?210"></div>
            <div class="item"><img src="https://picsum.photos/400?26"></div>
            <div class="item"><img src="https://picsum.photos/400?27"></div>
            <div class="item"><img src="https://picsum.photos/400?28"></div>
            <div class="item"><img src="https://picsum.photos/400?29"></div>
        </div>
        <div class="contarner">
            <div class="item"><img src="https://picsum.photos/400?31"></div>
            <div class="item"><img src="https://picsum.photos/400?32"></div>
            <div class="item"><img src="https://picsum.photos/400?33"></div>
            <div class="item"><img src="https://picsum.photos/400?34"></div>
            <div class="item"><img src="https://picsum.photos/400?35"></div>
            <div class="item"><img src="https://picsum.photos/400?310"></div>
            <div class="item"><img src="https://picsum.photos/400?36"></div>
            <div class="item"><img src="https://picsum.photos/400?37"></div>
            <div class="item"><img src="https://picsum.photos/400?38"></div>
            <div class="item"><img src="https://picsum.photos/400?39"></div>
        </div>
        <div class="contarner">
            <div class="item"><img src="https://picsum.photos/400?41"></div>
            <div class="item"><img src="https://picsum.photos/400?42"></div>
            <div class="item"><img src="https://picsum.photos/400?43"></div>
            <div class="item"><img src="https://picsum.photos/400?44"></div>
            <div class="item"><img src="https://picsum.photos/400?45"></div>
            <div class="item"><img src="https://picsum.photos/400?410"></div>
            <div class="item"><img src="https://picsum.photos/400?46"></div>
            <div class="item"><img src="https://picsum.photos/400?47"></div>
            <div class="item"><img src="https://picsum.photos/400?48"></div>
            <div class="item"><img src="https://picsum.photos/400?49"></div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::-webkit-scrollbar{
    height: 0;
}
$n : 9;
$size : 100vw / $n;
.contarner{
    display: flex;
    // 奇数行向左偏移
    &:nth-child(even){
        margin-left: -$size / 2;
    }
    // 第一排不需要margin-top
    &:nth-child(n+2){
        margin-top: -$size / 6;
    }
    .item{
        width: $size;
        height: $size;
        background: #000;
        clip-path: polygon(50% 0%, 92% 25%, 92% 74%, 50% 100%, 6% 77%, 6% 26%);
        flex-shrink: 0;
        transition: all 0.3s ease; 
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .amplify{
        transform: scale(1.3);
    }
    .reduce{
        transform: scale(0.8);
    }
}


const items = document.querySelectorAll('.item');
// 鼠标移入移出事件
for (const v of items) {
    // 鼠标移入
    v.addEventListener('mouseenter', function(e) {
        let it = e.target;
        it.classList.add('amplify');
        // 当前元素索引
        let index = [...it.parentNode.children].indexOf(it);
        // 当前元素父级的索引
        let parentIndex = [...it.parentNode.parentNode.children].indexOf(it.parentNode);
        if(parentIndex%2 == 1){
            index = index-1;
        }
        // 左右元素添加类名
        if(it.previousElementSibling){
            it.previousElementSibling.classList.add('reduce');
        }
        if(it.nextElementSibling){
            it.nextElementSibling.classList.add('reduce');
        }
        // 上一排元素添加类名
        if(it.parentNode.previousElementSibling){
            if(it.parentNode.previousElementSibling.children[index]){
                it.parentNode.previousElementSibling.children[index].classList.add('reduce');
            }
            if(it.parentNode.previousElementSibling.children[index+1]){
                it.parentNode.previousElementSibling.children[index+1].classList.add('reduce');
            }
        }
        // 下一排元素添加类名
        if(it.parentNode.nextElementSibling){
            if(it.parentNode.nextElementSibling.children[index]){
                it.parentNode.nextElementSibling.children[index].classList.add('reduce');
            }
            if(it.parentNode.nextElementSibling.children[index+1]){
                it.parentNode.nextElementSibling.children[index+1].classList.add('reduce');
            }
        }
    });
    // 鼠标移出
    v.addEventListener('mouseleave', function(e) {
        let it = e.target;
        e.target.classList.remove('amplify');
        // 当前元素索引
        let index = [...it.parentNode.children].indexOf(it);
        // 当前元素父级的索引
        let parentIndex = [...it.parentNode.parentNode.children].indexOf(it.parentNode);
        if(parentIndex%2 == 1){
            index = index-1;
        }
        // 左右元素添加类名
        if(it.previousElementSibling){
            it.previousElementSibling.classList.remove('reduce');
        }
        if(it.nextElementSibling){
            it.nextElementSibling.classList.remove('reduce');
        }
        // 上一排元素添加类名
        if(it.parentNode.previousElementSibling){
            if(it.parentNode.previousElementSibling.children[index]){
                it.parentNode.previousElementSibling.children[index].classList.remove('reduce');
            }
            if(it.parentNode.previousElementSibling.children[index+1]){
                it.parentNode.previousElementSibling.children[index+1].classList.remove('reduce');
            }
        }
        //下一排元素添加类名
        if(it.parentNode.nextElementSibling){
            if(it.parentNode.nextElementSibling.children[index]){
                it.parentNode.nextElementSibling.children[index].classList.remove('reduce');
            }
            if(it.parentNode.nextElementSibling.children[index+1]){
                it.parentNode.nextElementSibling.children[index+1].classList.remove('reduce');
            }
        }
    });
}

 鼠标移入当前元素放大，周围元素缩小

_最初の心
关注
专栏目录
前端实现蜂巢布局思路
2301_79347496的博客
10-31 491
这里可以以中心点为坐标原点[0,0],以[1,0], [1,1],[-1,1],[-1,0],[-1,-1],[1,-1]这种形式来表示第二圈在轴线上的六个六边形的中心点关系（这是一种形式，并非真实的坐标系坐标）。六条发散轴上的六边形中心点坐标是最容易计算的，不过要计算三圈及其开外的，就得有那么一点点的数学基础，知道sin60度cos60度的意思。至此，生成六边形中心坐标点的方法完成。进一步观察，可知，第三圈时两条发散的轴中间夹了一个六边形，第四圈时两条发散的轴中间夹了两个六边形，依次类推。
【iOS】UICollectionView自定义Layout之蜂窝布局
杜子兮@CSDN
09-02 5559
网上的UICollectionView的Layout布局，其cell的形状多为矩形和圆形。 本篇博文将正六边形作为cell的基本形状，为您展现独特的蜂窝布局效果及实现源码。 帮助您让自己的App脱颖而出，更加与众不同。
实现六边形，蜂窝状分布
最新发布
m0_51572647的博客
08-07 627
六边形蜂巢布局
js响应式蜂巢样式
09-20
js响应式蜂巢样式，一个很好的样式布局，可增加网页美观度
蜂窝状布局
08-05
里面两个demo、这种是通过计算来让两个布局相连、不推荐这种做法、适配太难
通过JS生成蜂巢背景图（六边形背景图）
qq_39410252的博客
09-19 992
通过SVG绘制丰巢动画背景
页面类似蜂巢的布局
weixin_30312557的博客
01-17 378
做公司页面的时候遇到一个类似下图蜂巢的布局，比较麻烦，来这留个档案 <section> <h1 style="text-align: center;margin-top: 60px;margin-bottom: 40px;font-size: 24px">合作伙伴</h1> <div class...
jQuery基于svg文字数据蜂窝布局代码
06-10
在本项目中，SVG被用来绘制蜂窝结构，通过编程方式控制每个单元格的形状、大小、颜色以及位置，实现动态和自适应的布局效果。 jQuery在这其中的角色是作为JavaScript的辅助工具，它帮助开发者更高效地操作DOM...
纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
09-25
【标题】中的知识点是使用纯CSS来创建六边形（蜂窝）导航效果，并且这个效果支持hover状态和各种浏览器的兼容性。 【描述】中提到的技术点包括： 1. 边框技巧：作者在之前的文章中利用CSS的边框创建了三角形，这种...
css3旋转图片蜂窝布局鼠标悬停图片旋转动画特效
11-12
通过以上步骤，你就可以创建一个鼠标悬停时图片旋转的蜂窝布局效果了。记住，实践是检验真理的唯一标准，动手尝试一下，你会更深入地理解这些技术。这个名为"texiao4915_1560681041"的压缩包文件可能包含了实现此...
蜂窝布局和用户分布：7个蜂窝布局架构，每个单元内都有用户分布-matlab开发
05-30
运行“编译”，用户可以输入“小区半径”和“每个基站的用户数”。 “编译”文件给出了该图。
利用d3.js实现蜂巢图表带动画效果
10-16
主要给大家介绍了关于如何利用d3.js实现蜂巢图表带动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d3.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
动态星空, 动态蜂巢 H5 代码 学习canvas JS 不错的资源
05-21
里面有精美的canvas特效做出来的星空代码 可以又来做自己特例独行的网页代码 也可以作为自己的简历介绍页面 也可以用来学习前端H5动画效果 总之是一波不错的学习资源
jQuery基于svg文字数据蜂窝布局代码.zip
09-22
当jQuery遇上SVG，可以实现许多独特的视觉效果，如本例中的“文字数据蜂窝布局”。下面我们将详细探讨这一技术的实现原理和应用。 首先，jQuery的核心在于DOM操作和事件处理。在这个项目中，jQuery可能被用来选择...
一个蜂巢 状的布局
陈刚的博客
05-25 3892
需要一个蜂巢型状的导航，或者图片展示，所以编写了这个demo。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>六边形</title> <style> .wrap{margin:100px;mar
蜂窝式排列方式
weixin_33696106的博客
08-27 1249
根据传入不同的参数，智能的显示蜂窝式布局，效果如下图： 制作步骤： 1、在库中建一个mc 绑定名称为“myMC” 2、建一个文档类，代码如下： package { import flash.display.Sprite; /** * @author chb * @data 2015-8-26 * @email 645338868@qq.com ...
写了一个画蜂巢的js
qq_40907356的博客
11-11 792
写了一个画蜂巢的插件 应该还存在很多问题，写的也特别简单，就记录一下。 效果如下： js (function($) { 'use strict'; var honeycomb = function(element, options) { this.$element=element; this.options = $.extend({}, honeycomb.opts, options); this.init(); } honeycomb.opts = { styl
蜂窝模特相册HTML5模板在线展示
该模板使用了当前网页设计中广泛流行的蜂窝设计元素，允许网页设计师创建出视觉吸引且具有独特展示效果的模特相册网站。 ### HTML5技术知识点 HTML5是最新一代的超文本标记语言，用于构建和展示网页内容。HTML5...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_最初の心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值