实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>学习实验课</title>

</head>

<style>

body{

background: url(images/0.jpg)no-repeat;

background-size:cover;

}

.box{

    width:100%;

    height:300px;

}

.inner_image{

    width:1200px;

    height:300px;

    background:gray;

    opacity:0.7;

    margin:0 auto;

}

.inner_image img{

 position: relative;

 float:left;

 width:200px;

 height:200px;

 border:2px solid yellow;

 margin-left: 20px;

 left:40px;

 top:40px;

}

</style>

<body>

    <div class="box">

         <div class="inner_image">

                <img src="data:images/0.jpg" alt="" id="img1"/>

                <img src="data:images/1.jpg" alt="" id="img2"/>

                <img src="data:images/2.jpg" alt="" id="img3"/>

                <img src="data:images/3.jpg" alt="" id="img4" />

                <img src="data:images/4.jpg" alt="" id="img5" />

         </div>

    </div>

<script>

window.onload=function(){

 var image1=document.getElementById('img1');

 var image2=document.getElementById('img2');

 var image3=document.getElementById('img3');

 var image4=document.getElementById('img4');

 var image5=document.getElementById('img5'); 

 image1.onclick=function(){

  changeImg(0);

 }

  image2.onclick=function(){

  changeImg(1);

 }

  image3.onclick=function(){

  changeImg(2);

 }

  image4.onclick=function(){

  changeImg(3);

 }

  image5.onclick=function(){

  changeImg(4);

 }

 function changeImg(num){

     document.body.style.backgroundImage="url(images/"+num+".jpg)";

 }

}

</script>

</body>

</html>

点击图片改变背景的demo-学习第二天的更多相关文章

  1. ios-点击图片放大,背景变半透明

    在view中点击一个图片,图片放大,背景变半透明,图片不会变透明的效果图如下 思路:图片框是一个按钮,监听点击事件. 当点击图片后:改变图片的frame,使图片放大,并且在controller.vie ...

  2. css3 实现png图片改变背景颜色

    实际上是用的是就是css的filter的drop-shadow属性 drop-shadow: 1 不支持内阴影 2 不支持多阴影 3 兼容性 ie13+  谷歌 火狐   android4.4+  i ...

  3. （1）vue点击图片预览（可旋转、翻转、缩放、上下切换、键盘操作）

    今天做项目的时候,遇到了新需求,需要把点击图片放大的功能.学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewer ...

  4. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  5. iOS 创建多个button实现点击改变背景颜色

    工程中需要实现与UISegmentedControl效果相似的一排一共十个button,如下图.但是SegmentedControl修改不太方便,就用button替代, 循环创建十个button,点击 ...

  6. UITableViewCell添加点击时改变字体的颜色、背景、图标

    改变字体颜色:cell.textLabel.highlightedTextColor 改变背景颜色:cell.selectedBackgroundView (必须是图片哦) 改变图标颜色:cell.i ...

  7. css3-11 如何改变背景图片的大小和位置

    css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...

  8. Android中通过xml改变背景及文字颜色

    原创文章,转载请注明出处,谢谢! 本篇主要介绍Android开发中,通过XML资源文件来设置控件在不同状态下的背景及文字颜色.关于xml改变背景及文字颜色的原理,大家可以去看一下郭霖大神的源码分析文章 ...

  9. 《IT蓝豹》吹雪花demo,学习android传感器

    吹雪花demo,学习android传感器 吹雪花demo,学习android传感器,嘴巴对着手机底部吹一下就会出现飘着雪花效果. 算是学习android传感器效果.本例子主要是通过android.me ...

随机推荐

  1. VMware虚拟机安装CentOS 7 Minimal 详细全过程

    VMware虚拟机安装CentOS 7 Minimal 详细全过程记录,并进行CentOS7 的网络配置,本次安装的CentOS镜像版本为官方网站下载的 CentOS-7-x86_64-Minimal ...

  2. scrapy--ipproxy

    不要急于求成,你只要做的是比昨天的你更优秀一点 --匿名 今天给大家讲一下--IpProxy,由于从"http://www.xicidaili.com/nn"爬取,以下是我转载的博 ...

  3. 通信服务器哈希Socket查找(Delphi)

    在Socket通信服务器的开发中,我们经常会需要Socket与某个结构体指针进行绑定.当连接量很大时,意味着需要个高效的查找方法 Delphi中提供了哈希算法类,以此类为基础,修改出Socket专用M ...

  4. 学习Pytbon第十七篇，面向对象编程

    面向对象技术简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类 ...

  5. Makefile (3) 基本语法和使用

    make是用来管理一个工程项目的工具 . Makefile就是这个项目文件 . 1.Makefile 是由若干条规则组成的,每个规则的语法如下所示 : #规则 targets: prerequisit ...

  6. HDU 3364 高斯消元

    Lanterns Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  7. 笔记-scrapy-深入学习-sheduler

    笔记-scrapy-深入学习-sheduler 1.      scheduler.py source code:scrapy/core/scheduler.py: 1.1.    初始化的开始 在分 ...

  8. 为什么i=i++后，i的值不变（深入解析）

    在Java中,运行以下代码: int i=10; i=i++; System.out.println(i); 得到的结果仍然为10,为什么呢?理论上,运算的过程不应该是i首先把10取出来,赋值给i,然 ...

  9. 考拉Android统一弹框

    作者:钱成杰 背景 在快速开发的背景下,经历了n个版本后的考拉Android App中已经存在了各种各样看似相同却各有差别的弹框样式.其中包括系统弹框和自定义弹框,并且在线上时常会出现IllegalA ...

  10. Android学习记录（3）—Android中ContentProvider的基本原理学习总结

    一.ContentProvider简介        当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据 ...