实例代码：

<!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. spring-开发需要jar包

    需要的开发包 Spring核心开发包: Commons-logging.jar Spring-beans.jar Spring-context.jar Spring-core.jar Spring-e ...

  2. 【转载】java 客户端链接不上redis解决方案 (jedis)

    本文出自:http://blog.csdn.net/lulidaitian/article/details/51946169 出现问题描述: 1.Could not get a resource fr ...

  3. pyhton——logging日志模块的学习

    https://www.cnblogs.com/yyds/p/6901864.html 本节内容 日志相关概念 logging模块简介 使用logging提供的模块级别的函数记录日志 logging模 ...

  4. 学习python第十二天，函数4 生成器generator和迭代器Iterator

    在Python中,这种一边循环一边计算的机制,称为生成器:generator 要创建一个generator,有很多种方法.第一种方法很简单,只要把一个列表生成式的[]改成(),就创建了一个genera ...

  5. APUE中对出错函数的封装

    // 输出至标准出错文件的出错处理函数static void err_doit(int, int, const char *, va_list); /* * Nonfatal error relate ...

  6. Jongmah CodeForces - 1110D

    传送门 题意:你有n个数字,范围[1, m],你可以选择其中的三个数字构成一个三元组,但是这三个数字必须是连续的或者相同的,每个数字只能用一次,问这n个数字最多构成多少个三元组? 题解:三个一模一样的 ...

  7. [Codeforces958E2]Guard Duty (medium)(区间DP)

    Description 题目链接 Solution 可以把题目转化一下模型,将间隔取出来,转化为N-1个数,限制不能取相邻两个数,求取K个数的最小价值 设DP[i][j]表示前i个数取j个最大价值(第 ...

  8. scrapy进行分布式爬虫

    今天,参照崔庆才老师的爬虫实战课程,实践了一下分布式爬虫,并没有之前想象的那么神秘,其实非常的简单,相信你看过这篇文章后,不出一小时,便可以动手完成一个分布式爬虫! 1.分布式爬虫原理 首先我们来看一 ...

  9. PHP.26-TP框架商城应用实例-后台3-商品修改、删除

    商品修改{修改页一般与添加页有百分之九十的相似度} create($_POST,Model::MODEL_UPDATE):系统内置的数据操作包括Model::MODEL_INSERT(或者1)和Mod ...

  10. python lamba表达式

    lambda函数也叫匿名函数,即,函数没有具体的名称. g=lambda x:x**2 def f(x): return x**2 lambda语句中,冒号前是参数,可以有多个,用逗号隔开,冒号右边是 ...