点击图片弹出页面效果常用代码

最新推荐文章于 2024-06-30 16:07:35 发布

天地无边

最新推荐文章于 2024-06-30 16:07:35 发布

阅读量3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u011848751/article/details/73344132

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出效果页面</title>
    <style>
    @charset "UTF-8";
/**************************************************全局******************************************************/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
} 
    body {
	font-family: Microsoft YaHei,"宋体", Arial;
	color:#6c6c6c;
	font-size:12px;
	background:#FFF;
}
    #area{
    width:100%;
    height:800px;
    position:relative;
    background:#ffce2a;
     animation-name: color;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: color;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    
    
}
@keyframes color{
        from{background:#ffce2a;}
        to{background:#fcebb2;}
        
    }
    @-webkit-keyframes color{
        from{background:#ffce2a;}
        to{background:#fcebb2;}
        
    }

#area .images{
   position:absolute;
   width:660px;
   height:380px;
   overflow:hidden;
/*
    top:50%;
    left:50%;
*/
/*    transform:translate(-50%,-50%);*/
    
    border-radius:10px;
    transition:box-shadow 0.5s;
}
    #area .images:hover{
  box-shadow:2px 2px 5px #333;
}
    
    #myImg{
        cursor:pointer;
/*        transition:0.3s;*/
    border-radius:10px;
    }
    #myImg:hover{
        
/*        opacity:0.7;*/
    }
    /*背景样式开始*/
    .modal{
        
        display:none; /*默认隐藏*/
        position:fixed; /*固定在原来的位置*/
        z-index:1; /*成为最顶层*/
        padding-top:100px; /*box的位置距上*/
        left:0;
        top:0;
        width:100%;
        height:100%;
        overflow:auto; /*有需要时滚动*/
        background-color:rgb(0,0,); /*返回的颜色*/
        background-color:rgba(0,0,0,0.9); /*黑色透明度*/
    }
    .modal-content{
        margin:auto;
        display:block;
        width:80%;
        max-width:700px; 
    }
    #caption{
        
        margin:auto;
        display:block;
        width:80%;
        max-width:700px;
        text-align:center;
        color:#ccc;
        padding:10px 0;
        height:150px;
    }
    /*添加动画*/
    .modal-content,#caption{ /*隐藏图片弹出和文本弹出共同添加动画效果*/
        -webkit-animation-name:zoom;
        -webkit-animation-duration:0.6s;
        animation-name:zoom; /*动画效果名（缩放）*/
        animation-duration:0.6s; /*动画执行时间*/
    }
    @-webkit-keyframes zoom{
        
        from{-webkit-transform:scale(0)} /*2D变化起始*/
        to{-webkit-transform:scale(1)} /*2D变化结束*/
    }
    @keyframes zoom{
        
        from{transform:scale(0.1)}/*2D变化起始*/
        to{transform:scale(1)}/*2D变化结束*/
    }
    /*关闭按钮*/
    .close{
        position:absolute; /*绝对定位*/
        top:15px;  /*定位位置*/
        right:35px;
        color:#f1f1f1; /*定义颜色*/
        font-size:40px;
        font-weight:bold;
        transition:0.3s; /*过度效果时间*/
    }
    .close:hover,.close:focus{ /*关闭按钮鼠标经过和鼠标焦点获取后*/
        color:#bbb; /*改变颜色*/
        text-decoration:none; /*去掉下划线*/
        cursor:pointer; /*鼠标指针样式*/
    }
    /*100%图像宽度在小型显示屏*/
    @media only screen and (max-width:700px){ /*媒体查询，如果小于700px像素执行*/
        
        .modal-content{
            width:100%;
        }
    }
    </style>
</head>
<body>
    <div id="area">
        <h1>福田汽车吊</h1>
        <div class="images">
            
            <img id="myImg" src="images/img.jpg" alt="福田Z5汽车吊展示" >
            <!-- The Modal -->
            <div id="myModal" class="modal">
                  <span class="close">×</span>
                  <img class="modal-content" id="img01">
                  <div id="caption"></div>
            </div>   
        </div>
    </div>
    <script>
        var modal = document.getElementById("myModal");
        //获取动态窗口
        var img = document.getElementById("myImg");
        //获取要展示的图片元素
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        img.onclick = function(){ //获取图像并添加点击事件
          modal.style.display = "block"; //点击后弹出隐藏界面
          modalImg.src = this.src;  //图像的地址获取成当前点击的图片地址
          modalImg.alt = this.alt;  //图像的描述文字替换成当前点击对象的文字
          captionText.innerHTML = this.alt; //把获取到的图像描述文字插入到一个层内。
        }
        var span = document.getElementsByClassName("close")[0];
        //获取到关闭按钮的内部元素X号
        span.onclick = function(){
          //点击获取到的X号元素添加点击事件
          modal.style.display = "none";
          //点击X号元素后改变弹出隐藏图层的样式为默认的隐藏
        }
    </script>
</body>
</html>