# 实验
用于vuepress的属性实验
var hModule = document.getElementsByClassName('h-module'); //获取模态框中的关闭按钮属性
var hhtImg = document.getElementById("hhtImg"); //设置模态框不同位置按钮点击之后展示的属性图片属性
var hText = document.getElementById("hText"); //设置模态框显示之后的提示信息
/*hImage函数
* 由于图片只有一张,所以同时设置title属性以示区分
* 通过 switch语句判断点击不同按钮,
* 在模态框展示不同的图片。
*/
function hImage(e) {
console.log();
switch (e) {
case 1:
//hhtImg.src为设置需要展示的图片的地址
hhtImg.src = "http://oigzh9iic.bkt.clouddn.com/%E4%BA%AB%E6%9C%88%E4%BC%9A%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg";
hhtImg.title = "这里是" + e; //此处设置鼠标悬浮于图片时显示的文字
hText.innerHTML = "这里是二维码" + e; //此出设置模态框显示之后,展示提示文字的内容
break;
case 2:
hhtImg.src = "http://oigzh9iic.bkt.clouddn.com/%E4%BA%AB%E6%9C%88%E4%BC%9A%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg";
hhtImg.title = "这里是" + e;
hText.innerHTML = "这里是二维码" + e;
break;
case 3:
hhtImg.src = "http://oigzh9iic.bkt.clouddn.com/%E4%BA%AB%E6%9C%88%E4%BC%9A%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg";
hhtImg.title = "这里是" + e;
hText.innerHTML = "这里是二维码" + e;
break;
}
hModule[0].style.display = "block";
}
/*hShow函数
* 功能:关闭模态框;
* 由于原生js中,获取参数的值
* 之后,其属性为数组形式;
* 需要设置下标,再去设置style属性,
* 或者是其他属性
* */
function hShow() {
hModule[0].style.display = "none";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!--主框架-->
<div class="h-box">
<div style="color: #fff;text-align: center">
<img class="h-image" onclick="hImage(1)" width="50" height="25" alt="图标1" title="1">
<img class="h-image" onclick="hImage(2)" width="50" height="25" alt="图标2" title="2">
<img class="h-image" onclick="hImage(3)" width="50" height="25" alt="图标3" title="3">
</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8


