前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给网页增加更换上传背景功能

给网页增加更换上传背景功能

原创
作者头像
Azad
发布2023-02-20 12:40:04
9400
发布2023-02-20 12:40:04
举报
文章被收录于专栏:Azad | 互联网记录

实现效果:

  1. 点击对应缩略图替换其为网页背景
  2. 上传图片替换其为网页背景

HTML部分:

代码语言: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部分:

代码语言:javascript
复制
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);
      });

效果演示:搜哈-聚合搜索导航 右侧侧边栏

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档