【Web APIs】JavaScript 操作多个元素 ② ( 动态换肤效果 | 取消表里边距样 ...

科技颠覆者  论坛元老 | 2024-9-6 17:22:16 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 2061|帖子 2061|积分 6183

一、案例需求 - 实现动态换肤效果


在页面中 设置三个图片选项 , 点击图片 , 可以动态设置不同的配景 ;





二、案例核心要点



1、取消表里边距样式


在下面的 标签结构 结构中 , 需要准确的控制每个元素的排列 ;

默认的 表里边距 会严峻干扰 标签结构 , 先取消默认的表里边距样式 ;
  1.         * {
  2.             /* 取消默认内外边距样式 */
  3.             margin: 0;
  4.             padding: 0;
  5.         }
复制代码
浏览器 标签元素 的 默认表里边距样式 可参考 扫除元素的默认表里边距样式 ★ ( 重点 ) 博客章节 ;

2、设置配景


为标签元素 设备配景 , 语法格式如下 :
  1. background: pink url(image.jpg) no-repeat  scroll center top ;
复制代码
background 属性值的 各种配景样式属性的序次 没有举行强制定义 , 这里 建议按照如下序次举行编写 :


  • 配景颜色
  • 配景图片
  • 配景平铺
  • 配景滚动
  • 配景位置

设置 body 标签元素的大配景 居中置顶显示 不重复 代码如下 :
  1.         body {
  2.             /* 设置 body 标签元素的大背景 居中置顶显示 不重复 */
  3.             background: url(images/1.jpg) no-repeat center top;
  4.         }
复制代码
参考博客 【CSS】CSS 总结 ③ ( CSS 配景设置 | 配景颜色 | 配景图片 | 配景图片平铺样式 | 配景图片位置 | 超大配景图片设置 | 配景附着 | 配景样式简写 | 配景半透明 ) ★

3、取消 li 默认样式


取消 li 的默认样式 , 默认前面带小圆点 :
  1.         li {
  2.             /* 取消 li 的默认样式 , 默认前面带小圆点 */
  3.             list-style: none;
  4.         }
复制代码

4、准确计算宽度


标签结构如下 ,
  1.     <ul class="change_skin">
  2.         <!-- 将 img 标签放在 ul 列表的 li 列表项中 -->
  3.         <li><img src="images/1.jpg"></li>
  4.         <li><img src="images/2.jpg"></li>
  5.         <li><img src="images/3.jpg"></li>
  6.     </ul>
复制代码
外部的 ul 宽度设置为 300 px , li 设置为左浮动 , 会从左到右排列 , 将 li 宽度设置为 100 px , 则正幸亏 ul 的 300 像素宽度上摆满 ;
  1.         .change_skin {
  2.             /* 设置宽度 , 每个图片 100 像素 , 三张图片占 300 像素 */
  3.             width: 300px;
  4.         }
  5.         
  6.         .change_skin img {
  7.             /* 图片宽度 100 像素 高度自适应 */
  8.             width: 100px;
  9.         }
  11.         .change_skin li {
  12.             /* li 默认是块级元素 , 设置左浮动后 会从左到右排列 */
  13.             float: left;
  14.             /* 鼠标移动上去后变成小手 */
  15.             cursor: pointer;
  16.         }
复制代码
达成下图效果 :


5、改变界面样式 - 鼠标移动上去变成小手


设置 cursor: pointer; 属性 , 鼠标移动上去后变成小手 ;
  1.         .change_skin li {
  2.             /* li 默认是块级元素 , 设置左浮动后 会从左到右排列 */
  3.             float: left;
  4.             /* 鼠标移动上去后变成小手 */
  5.             cursor: pointer;
  6.         }
复制代码

参考 【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 ) 博客 , 更改元素样式 ;
cursor 样式常用属性值 :


  • default : 默认鼠标样式 , 白色箭头鼠标 ;
  • pointer : 小手形状 ;
  • move : 移动 - 十字架四个箭头 ;
  • text : 文本 - 鼠标移动到文本上的样式 ;
  • not-allowed : 禁止 ;

6、JS 分析


document.querySelector('.change_skin') 代码用于调用 Document 的 querySelector 方法 , 获取 类选择器 .change_skin 对应的单个元素 ;
然后调用 querySelectorAll('img') 函数 , 这是调用 Element 的 querySelectorAll 函数 , 获取多个 Element 元素 , 这里获取的是 .change_skin 类标签下的 img 标签元素 ;

之后 给 一组 img 标签元素注册 点击事件 , 一旦 img 标签被点击 , 那么将 该 img 标签的图片设置为 body 标签元素的配景图片 ;

部门代码示例 :
  1.         // 1. 获取元素
  2.         // 获取 change_skin 类下面的 img 标签元素
  3.         var imgs = document.querySelector('.change_skin').querySelectorAll('img');
  6.         // 2. 给 一组 img 标签元素注册 点击事件
  7.         //    一旦 img 标签被点击 , 那么将 该 img 标签的图片设置为 body 标签元素的背景图片
  8.         for (var i = 0; i < imgs.length; i++) {
  9.             imgs[i].onclick = function() {
  10.                 // 控制台打印 第 i 个 img 标签 显示的 图片路径
  11.                 console.log("被点击的 img 标签显示的图片路径是 : " + this.src);
  13.                 // 通过调用 this.src 可以获取图片的相对路径
  14.                 // 点击哪个图片 , 就把这个图片 设置为 body 标签元素的背景 图片
  15.                 document.body.style.backgroundImage = 'url(' + this.src + ')';
  16.             }
  17.         }
复制代码




三、完整代码示例



1、代码示例


代码示例 :
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Inline Style Operation Example</title>    <style>        * {
  2.             /* 取消默认内外边距样式 */
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.                 body {
  7.             /* 设置 body 标签元素的大背景 居中置顶显示 不重复 */
  8.             background: url(images/1.jpg) no-repeat center top;
  9.         }
  10.                 li {
  11.             /* 取消 li 的默认样式 , 默认前面带小圆点 */
  12.             list-style: none;
  13.         }
  14.                 .change_skin {            /* 设置宽度 , 每个图片 100 像素 , 三张图片占 300 像素 */            width: 306px;        }                .change_skin img {            /* 图片宽度 100 像素 高度自顺应 */            width: 100px;        }                .change_skin li {
  15.             /* li 默认是块级元素 , 设置左浮动后 会从左到右排列 */
  16.             float: left;
  17.             /* 鼠标移动上去后变成小手 */
  18.             cursor: pointer;
  19.         }
  20.     </style></head><body>    <ul class="change_skin">
  21.         <!-- 将 img 标签放在 ul 列表的 li 列表项中 -->
  22.         <li><img src="images/1.jpg"></li>
  23.         <li><img src="images/2.jpg"></li>
  24.         <li><img src="images/3.jpg"></li>
  25.     </ul>
  26.     <script>        // 1. 获取元素
  27.         // 获取 change_skin 类下面的 img 标签元素
  28.         var imgs = document.querySelector('.change_skin').querySelectorAll('img');
  31.         // 2. 给 一组 img 标签元素注册 点击事件
  32.         //    一旦 img 标签被点击 , 那么将 该 img 标签的图片设置为 body 标签元素的背景图片
  33.         for (var i = 0; i < imgs.length; i++) {
  34.             imgs[i].onclick = function() {
  35.                 // 控制台打印 第 i 个 img 标签 显示的 图片路径
  36.                 console.log("被点击的 img 标签显示的图片路径是 : " + this.src);
  38.                 // 通过调用 this.src 可以获取图片的相对路径
  39.                 // 点击哪个图片 , 就把这个图片 设置为 body 标签元素的背景 图片
  40.                 document.body.style.backgroundImage = 'url(' + this.src + ')';
  41.             }
  42.         }
  43.     </script></body></html>
复制代码

2、执行结果




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

科技颠覆者

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表