javascript动态网页

1.     效果图                               

源码和动态效果视频均在百度网盘上

链接：https://pan.baidu.com/s/1WqBroCwTKDb0vBpCjuH8UQ 
提取码：1314

解析:

一.网页架构

 总共5个图像区域：

<div class="cont"> 网页容器
    <!--手风琴的大盒子-->
    <div class="cont__inner"> //图像区域容器 内含5个图像区域 这里只体现一个区域
        <!--图片 文字 按钮部分-->
        <div class="el">
            <!--图片 文字 按钮部分-->
            <div class="el__overflow"><!--包含inner-->
            <div class="el__inner">
            <!--主体图片和遮罩层部分-->
            <div class="el__bg">
                <div class="before"></div>
                <div class="after"></div>
            </div>
            <!--图片中间文字内容部分-->
            <div class="el__preview-cont">
                <h2 class="el__heading">Section1</h2>
            </div>
                <!--图片放大后的标题和关闭按钮部分-->
            <div class="el__content">
                <div
                        class="el__text">Whatever</div>
                <div class="el__close-btn"></div>
            </div>
            </div>
            </div>
            <!--底部的数字部分-->
            <div class="el__index">
                <div class="el__index-back">1</div>
                <div class="el__index-front">
                    <div class="el__index-overlay" data-index="1">1</div>
                </div>
            </div>
        </div>
</div>

二.CSS样式

1.利用透明度的变换实现高亮 其中用到了hover before after选择器

  

.el__bg:after
{
    content:'';
    z-index:1;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3); /*增加一个黑色背景*/
    opacity:1;
    -webkit-transition:opacity 0.5s;
    transition:opacity 0.5s;
}
.cont__inner:hover .el__bg:after
{
    opacity:1;/*使得全部的遮罩层显示出来*/
}
.el:hover .el__bg:after{
    opacity:0;/*遮罩层就是那个黑色的*/
}

2.创建一个鼠标点击后的新类s--active

3.其中若要实现效果图中点击图片后放大然后覆盖其它页面的功能

则利用translate3d来进行坐标的移动和图片宽度的放大

.el.s--active
{
    z-index:1;
    width:100%;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition:transform 0.6s,width 0.7s 0.7s,z-index 0s;
}

4.利用transition实现过渡效果

三.javascript实现交互

1.实现点击图片后的放大显示

2.实现点击关闭按钮后的图像还原

var $cont = document.querySelector(".cont"); //获取对象
var $elsArr=
    [].slice.call(document.querySelectorAll(".el"));//向点击后的区域添加s--active
    $elsArr.forEach(function($el)
    {
        $el.addEventListener("click",function()
        {
            if(this.classList.contains("s--active")){return;}
            $cont.classList.add("s--el-active");
            this.classList.add("s--active");
        });
    });
var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));

// 点击关闭按钮时触发的事件
$closeBtnsArr.forEach(function ($btn) {
    $btn.addEventListener('click', function (e) {
        e.stopPropagation(); // 防止事件冒泡
        $cont.classList.remove('s--el-active'); // 关闭放大模块时给 .cont 类元素移除 s--el-active 类
        document.querySelector('.el.s--active').classList.remove('s--active'); // 找到 .el 类中包含 s--active 类的元素，并把 s--active 移除
    });
});