Skip to content

Commit bf25989

Browse files
author
lcisegoist
committed
update
1 parent 12fba60 commit bf25989

2 files changed

Lines changed: 36 additions & 7 deletions

File tree

‎03 - CSS Variables/index-SOYAINE.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
2727
</code>
2828
</div>
2929

30-
<img src="http://ofjku7mlm.bkt.clouddn.com/16-12-22/39048308-file_1482385934460_1316f.jpg">
30+
<img src="data:image/jpeg;base64,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">
3131

3232
<style>
3333

@@ -42,6 +42,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
4242
}
4343

4444
img {
45+
/*动态变量实现同步修改*/
4546
padding: var(--spacing);
4647
background: var(--base);
4748
filter: blur(var(--blur));
@@ -80,12 +81,14 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
8081

8182
function handleUpdate() {
8283
const suffix = this.dataset.sizing || ''; // 根据 data-sizing 获取参数的后缀
83-
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); // 设置页面 CSS 变量的值
84+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); // 设置页面 CSS动态变量的值
8485
document.getElementById(`code-${this.name}`).innerText = this.value + suffix; // 页面参数实时显示
8586
}
8687

87-
inputs.forEach( input => input.addEventListener('change', handleUpdate));
88-
inputs.forEach( input => input.addEventListener('mousemove', handleUpdate)); // 在滑块拖动过程中也实时变化
88+
89+
inputs.forEach( input => input.addEventListener('input', handleUpdate)); //一行等效下面
90+
// inputs.forEach( input => input.addEventListener('change', handleUpdate));
91+
// inputs.forEach( input => input.addEventListener('mousemove', handleUpdate)); // 在滑块拖动过程中也实时变化
8992

9093

9194
// 以下为跨浏览器事件处理及 forEach 兼容性处理

‎03 - CSS Variables/index-START.html‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
99

1010
<div class="controls">
1111
<label for="spacing">Spacing:</label>
12-
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
12+
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px" step = '0.5'>
1313

1414
<label for="blur">Blur:</label>
15-
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
15+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px" step = '0.1'>
1616

1717
<label for="base">Base Color</label>
1818
<input type="color" name="base" value="#ffc600">
@@ -45,9 +45,35 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
4545
input {
4646
width:100px;
4747
}
48+
4849
</style>
49-
50+
<script src = '../jquery-3.7.1.js' type = 'text/javascript'></script>
5051
<script>
52+
$(document).ready(function () {
53+
const $img = $('img');
54+
const $inputs = $('input');
55+
const $hl = $('.hl');
56+
57+
function updateStyles() {
58+
const spacing = $('input[name="spacing"]').val();
59+
const blur = $('input[name="blur"]').val();
60+
const color = $('input[name="base"]').val();
61+
62+
$img.css({
63+
'border': `${spacing}px solid ${color}`,
64+
'filter': `blur(${blur}px)`
65+
});
66+
67+
$hl.css('color', color);
68+
}
69+
70+
// 初始样式
71+
updateStyles();
72+
73+
// 所有 input 输入时都更新样式
74+
$inputs.on('input', updateStyles);
75+
});
76+
5177
</script>
5278

5379
</body>

0 commit comments

Comments
 (0)