PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > 哇塞！太美了，BAT经典一键换肤案例，怎么点…怎么点...都好看~

哇塞！太美了，BAT经典一键换肤案例，怎么点…怎么点...都好看~

张福根一修品牌运营
张福根一修品牌运营 原创
2020年11月07日 22:01:54 879浏览

作业：一键换肤案例

案例效果：

一键换肤

案例源码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>作业: 一键换肤</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         display: grid;
  11.         /* 网格三列 */
  12.         grid-template-columns: repeat(3, 1fr);
  13.         column-gap: 10px;
  14.       }
  15.       .container > img {
  16.         width: 100%;
  17.         border: 3px solid #fff;
  18.         opacity: 0.6;
  19.       }
  20.       .container > img:active {
  21.         opacity: 1;
  22.       }
  23.       .container > img:hover {
  24.         opacity: 1;
  25.         cursor: pointer;
  26.         width: 105%;
  27.       }
  28.       body {
  29.         background-image: url(static/images/1.jpg);
  30.         background-repeat: no-repeat;
  31.         background-size: cover;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <img src="static/images/1.jpg" alt="" />
  38.       <img src="static/images/2.jpg" alt="" />
  39.       <img src="static/images/3.jpg" alt="" />
  40.     </div>
  41.     <script>
  42.       document
  43.         .querySelector(".container")
  44.         .addEventListener(
  45.           "click",
  46.           (ev) =>
  47.             (document.body.style.backgroundImage = "url(" + ev.target.src + ")")
  48.         );
  49.     </script>
  50.   </body>
  51. </html>
上一条： 大神杰作：让站点飞快！懒加载图片案例，噢 my gad！太快啦… 下一条： 事件添加方式,监听器和事件代理的实例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程