JavaScript实现点击图片换背景

JS制作网页–点击图片换背景，供大家参考，具体内容如下

网页中有四个图片，点击不同的图片，更换相对应的背景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>背景</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  li {
   list-style: none;
  }
  img{
   border: 0px;
   vertical-align: middle;
   width: 192px;
  }
  div{
   width: 768px;
   height: 120px;
  }
  div ul {
   overflow: hidden;
   background-color: pink ;
   margin: 100px auto;
  }
  div ul li {
   float: left;
   width: 192px;
   height: 120px;
   cursor: pointer;
  }
  body{
   background: url(images/1.jpg) no-repeat center top;
  }
 </style>
</head>
<body>
 <div>
  <ul>
   <li><img src=images/1.jpg> </li>
   <li><img src=images/2.jpg></li>
   <li><img src=images/3.jpg></li>
   <li><img src=images/4.jpg></li>
  </ul>
 </div>
 <script>
  var img = document.querySelector('ul').querySelectorAll('img')
  for(var i = 0 ;i < img.length;i++){
   img[i].onclick = function(){
    document.body.style.backgroundImage='url('+this.src+')';
   }
  }
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js设置随机切换背景图片的简单实例

    实例如下: <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/

  • js点击更换背景颜色或图片的实例代码

    1,按钮样式 复制代码 代码如下: <script>org_Color=document.bgColor.substring(1.10)</script><form><input type="button" value="淡黄色背景"onClick="document.bgColor='#feffc6'"><input type="button" value="浅

  • JavaScript实现更换背景图片

    JavaScript实现更换背景图片

    本文实例为大家分享了JavaScript实现更换背景图片的具体代码,供大家参考,具体内容如下 主要通过Js控制行内样式,达到更换背景图片的目的 效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>更换背景</title> <style type="text/css"> *{ margin: 0; pa

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • JavaScript实现点击图片换背景

    JS制作网页–点击图片换背景,供大家参考,具体内容如下 网页中有四个图片,点击不同的图片,更换相对应的背景. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo

  • javascript实现点击图片切换功能

    javascript实现点击图片切换功能

    本文实例为大家分享了javascript实现点击图片切换的具体代码,供大家参考,具体内容如下 实现效果:图片点击切换 代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <style> .

  • javascript实现点击图片切换

    点击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果.供大家参考: HTML代码如下: <div class="img"> <img src="images/1.jpg" id="myImg" class="myImg" alt="这里是1.jpg"> <p> <input type="button" id="

  • JavaScript实现点击图片翻转效果

    JavaScript实现点击图片翻转效果

    最近在做一个有关人脸采集的项目,然后在编写前端模块时,遇到了一个问题,就是当客户上传照片或直接拍照上传时,会遇到有些图片可能会90度翻转过来所以,我们需要给个按钮客户让客户自己可以对照品进行旋转效果大致如下 图1.正常图片上传 图2.图片左旋转 图3.图片右旋转 以上就是一个图片旋转功能 下面我们就开始代码部分吧 这里我采取了一个方法,然后当前我的图片格式是base64,如果遇到其它格式也无所谓,因为我们最终的效果还是要转为image对象来实现的 /** * 图片旋转 * @param dire

  • 用opencv给图片换背景色的示例代码

    图像平滑 模糊/平滑图片来消除图片噪声 OpenCV函数:cv2.blur(), cv2.GaussianBlur(), cv2.medianBlur(), cv2.bilateralFilter() 2D 卷积 OpenCV中用cv2.filter2D()实现卷积操作,比如我们的核是下面这样(3×3区域像素的和除以10): img = cv2.imread('lena.jpg') # 定义卷积核 kernel = np.ones((3, 3), np.float32) / 10 # 卷积操作,

  • js实现点击图片改变页面背景图的方法

    本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu

  • js实现点击切换checkbox背景图片的简单实例

    js实现点击切换checkbox背景图片的简单实例

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色表示勾选状态 . HTML源码如下: <div class="check"> <input id="checkbox1" class="checkbox" type="checkbox" checked =

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • 基于javascript代码实现通过点击图片显示原图片

    废话不多说了,直接给大家贴js实现点击图片显示原图片的代码,具体代码如下所示: function DrawImage(ImgD){ var image = new Image(); image.src=ImgD.src; var width = $(ImgD).attr("width"); var height = $(ImgD).attr("height"); if(width >100 && height>80){ ImgD.widt

  • 基于JavaScript实现移动端点击图片查看大图点击大图隐藏

    一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

随机推荐