实例代码：

<!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. Ubuntu安装MySQL及使用Xshell连接MySQL出现的问题(2003-Can't connect to MySql server及1045错误)

    不管在什么地方,什么时候,学习是快速提升自己的能力的一种体现!!!!!!!!!!! 以下所有的命令都是在root用户下操作(如果还没有设置root密码)如下: 安装好Ubuntu系统之后,打开终端先设 ...

  2. Cloudera Manager 安装 CDH5

    文档说明 本文是针对Linux CentOS6服务器与CDH5.15的安装手册. 关于CDH和ClouderaManager CDH(Cloudera's Distribution, includin ...

  3. oracle中序列,同义词的创建

    序列 序列是用来生成唯一,连续的整数的数据库对象.序列通常用来自动生成主机那或唯一键的值.序列可以按升序排序, 也可以按降序排序.例如,销售流水表中的流水号可以使用序列自动生成. 创建序列语法: cr ...

  4. 在程序开发中，++i 与 i++的区别

    在不参与运算的情况下,i++和++i都是在变量的基础加1 ◆在参与运算的情况下 Var i=123; Var j=i++;  先将i的值123赋值给j,之后再自增 j的值为123  i 的值为124 ...

  5. 【PHP项目】【Smarty】Smarty截取字符串方法truncate

    smarty truncate 截取字符串  //在sql中truncate是删除表格(truncate是只删除内容,delete彻底删除)从字符串开始处截取某长度的字符,默认的长度为80指定第二个参 ...

  6. 【word】html转doc的小研究

    html转doc,页眉页脚丢失 html 转 doc,是全屏铺满(缩放级别很高)

  7. Facebook Reporting API -- Facebook 数据导出API

    1.获取token 浏览器打开 "访问口令工具" (FB链接请FQ)  https://developers.facebook.com/tools/accesstoken/ App ...

  8. Android AppUtil通用类

    1.整体分析 1.1.先看一下源码,可以直接Copy. public class AppUtil { /** * 获取当前程序包名 * * @param context 上下文 * @return 程 ...

  9. 8 定制10MINs 3

    1. <div class="ui inverted red basic segment"> <h3 class="ui header"> ...

  10. URL地址传参中特殊符号的转码和解码

    背景: URL传参在web开发中很常见,一般来说这种方式并不推荐,原因就是浏览器多种多样,各家浏览器对URL地址的解析的表现很不一样,特别是当参数有非ASCII字符.英文字母.阿拉伯数字时. 在CRM ...