【开发小技巧】13—如何使用HTML CSS和JavaScript创建图像动画?

英文 | https://www.geeksforgeeks.org/how-to-create-image-lightbox-gallery-using-html-css-and-javascript/?ref=rp

翻译 | web前端开发(ID:web_qdkf)

你可以对JavaScript进行编码,但是我们也可以使用一些下载的JS和CSS。在本文中,我们将JS和CSS文件附加到我们的代码中。为了使我们自己的设计更好,我们还可以修改CSS代码。

我们将任务分为三步。

在第一步,创建结构;第二步,根据自己的目的添加需要的CSS;在最后一部分中,我们将链接下载的JS 和 CSS文件。

创建结构:在本部分中,我们将仅使用HTML进行编码以创建普通的HTML。

HTML代码如下:

<!DOCTYPE html> 
<html> 


<head> 
    <title>Lightbox Gallery</title> 
</head> 


<body> 
    <h2>GeeksforGeeks</h2> 
    <b>A Computer Science Portal for Geeks</b> 
    <div class="gallery"> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png"> 
        </a> 
    </div> 
</body> 


</html>

通过CSS设计结构:在本部分中,我们将添加一些CSS属性以使图像具有吸引力。

CSS代码如下:

<style> 
    body { 
        text-align: center; 
    } 


    h2 { 
        color: green; 
    } 


    .gallery { 
        margin: 10px 40px; 
    } 


    .gallery img { 
        width: 200px; 
        height: 50px; 
        transition: 1s; 
        padding: 5px; 
    } 


    .gallery img:hover { 
        filter: drop-shadow(4px 4px 6px gray); 
        transform: scale(1.1); 
    } 
</style> 

最终,在这一部分中,你必须将下载的CSS和JS文件链接到你的代码中。你可以通过解压缩文件来简单地链接下载的文件。对于CSS文件,请使用带有href属性的<link>标记作为CSS的地址,对于JS文件,请使用带有src属性的<script>标记作为代码。

最后,我们必须将data-lightbox =“ mygallery”属性放在<a>标记内。下一个和上一个按钮将在JS文件附加期间自动添加。

最终代码如下:

<!DOCTYPE html> 
<html> 


<head> 
    <title>Lightbox Gallery</title> 
    <link rel="stylesheet" 
          type="text/css" 
          href="lightbox2/dist/css/lightbox.min.css"> 
    <script src= 
"lightbox2/dist/js/lightbox-plus-jquery.min.js"> 
</script> 
    <style> 
        body { 
            text-align: center; 
        } 


        h2 { 
            color: green; 
        } 


        .gallery { 
            margin: 10px 40px; 
        } 


        .gallery img { 
            width: 200px; 
            height: 50px; 
            transition: 1s; 
            padding: 5px; 
        } 


        .gallery img:hover { 
            filter: drop-shadow(4px 4px 6px gray); 
            transform: scale(1.1); 
        } 
</style> 
</head> 


<body> 
    <h2>GeeksforGeeks</h2> 
    <b>A Computer Science Portal for Geeks</b> 
    <div class="gallery"> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" 
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png" 
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png"> 
        </a> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png"
           data-lightbox="mygallery"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png"> 
        </a> 
    </div> 
</body> 


</html>

最终效果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值