给网页增加更换上传背景功能
2023-03-07 09:47:39 时间
实现效果:
- 点击对应缩略图替换其为网页背景
- 上传图片替换其为网页背景
HTML
部分:
<!--本地切换背景图-->
<img src="img/image1.jpg" id="image1" width="80" height="40" />
<img src="img/image2.jpg" id="image2" width="80" height="40" />
<img src="img/image3.jpg" id="image3" width="80" height="40" />
<!--上传按钮-->
<!--用<label> 绑定 <input> 标签,然后隐藏 <input>-->
<label for="uploadImage" class="uploadImage" ><strong>点击上传图片</strong></label>
<input type="file" name="image" value="" id="uploadImage" hidden="hidden"/>
JS
部分:
let images = ["img/image1.jpg", "img/image2.jpg", "img/image3.jpg"];
let currentImageIndex = 0;
document.body.style.backgroundImage = "url(" + images[currentImageIndex] + ")";
document.body.style.backgroundSize = "cover"; // 背景图片填充方式为覆盖
// 点击缩略图切换
document.getElementById("image1").addEventListener("click", function(){
document.body.style.backgroundImage = "url(" + images[0] + ")";
document.body.style.backgroundSize = "cover";
});
document.getElementById("image2").addEventListener("click", function(){
document.body.style.backgroundImage = "url(" + images[1] + ")";
document.body.style.backgroundSize = "cover";
});
document.getElementById("image3").addEventListener("click", function(){
document.body.style.backgroundImage = "url(" + images[2] + ")";
document.body.style.backgroundSize = "cover";
});
// 上传替换
let uploadImage = document.getElementById("uploadImage");
uploadImage.addEventListener("change", function(){
let file = uploadImage.files[0];
let reader = new FileReader();
reader.onload = function(){
let dataURL = reader.result;
document.body.style.backgroundImage = "url(" + dataURL + ")";
document.body.style.backgroundSize = "cover";
}
reader.readAsDataURL(file);
});
效果演示:搜哈-聚合搜索导航 右侧侧边栏
相关文章
- 经济学:动态模型平均(DMA)、动态模型选择(DMS)、ARIMA、TVP预测原油时间序列价格|附代码数据
- 基于R语言混合效应模型(mixed model)案例研究|附代码数据
- 工地安全帽智能识别系统
- ImageRanger Pro Edition for Mac(图片管理器)
- 三星:成熟制程减产传闻不实,会设法满足客户需求
- 鸿海拟在印度培训人才,以满足当地半导体产业需求
- 中科二期扩建环评过关,台积电2nm厂即将启动
- 成本大幅上涨,英特尔要求将德国建厂补贴增加至100亿欧元
- Bing+Edge+ChatGPT,微软誓要重塑搜索
- 传三星、SK海力士高层紧急赴美,争取“芯片法案”及对华新规豁免权
- 新思科技DSO.ai助力客户完成100次流片,引领AI在芯片设计中的规模化应用
- 订单锐减!安靠上海厂超4000员工放假一周!
- 中芯国际去年营收突破495亿元!中芯深圳投产,中芯京城试产!
- 中国激光雷达第一股!禾赛科技成功登陆纳斯达克:市值超26亿美元!
- Q4净利大跌49%!日月光投控拟将25%的SiP封装产能转移出大陆!
- 程序员接外包注意事项
- PAT (Top Level) Practice 1017 The Best Peak Shape (35 分) 题解
- PTA 数据结构与算法题目集(中文)7-4 是否同一棵二叉搜索树 (25 分) 题解
- LFS 8.4 的编译与安装:ubuntu 18.04 宿主系统
- debian9.9 apache2.4 站点添加ssl证书配置https