实例代码：

<!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. linux：eth网卡对应的物理网口判断

    可以利用ethtool命令 #ethtool -p eth0 执行上述命令则相应的物理网口会闪烁,则可以判断对应的物理网口 注:应在不插网线的情况下测试

  2. 执行pip命令时遇到 Fatal error in launcher: Unable to create process using '"'

    电脑同时安装了python-2.7.13跟python-3.6.1,安装时勾选了pip,环境变量也已经配置好. 为了方便运行,同时修改了可执行文件为 python2和python3.此时在cmd命令行 ...

  3. oracle之bitmap索引

    oracle常见的索引是BTree索引和Bitmap索引. BTree索引特点: 默认索引 适合大量增删改查 不能用or操作符 适合高基数的列(即唯一值多) 创建sql:create index li ...

  4. Struts2之基于配置的字段校验

    上一篇struts2之输入校验介绍了手动完成输入校验,也即依靠重写validate方法和validateXxx方法,指定请求某个方法时对传入的参数进行校验. 本篇介绍基于配置的字段校验.下面是登录的常 ...

  5. 使用MyEclipse/Eclipse修改项目名称报Can't convert argument: null！

    报错: java.lang.IllegalArgumentException: Can't convert argument: null! 方法/步骤    报错原因:使用MyEclipse修改项目名 ...

  6. 笔记-scrapy-signal

    笔记-scrapy-signal 1.      scrapy singal 1.1.    信号机制 scrapy的信号机制主要由三个模块完成 signals.py 定义信号量 signalmana ...

  7. 笔记-pyrhon-lib-requests

    笔记-pyrhon-lib-requests 1.      简介 Requests is the only Non-GMO HTTP library for Python, safe for hum ...

  8. Python数据挖掘-航空公司客户价值分析

    出处:http://www.ithao123.cn/content-11127869.html 航空公司客户价值分析 目标:企业针对不同价值的客户制定个性化的服务,将有限的资源集中于高价值客户. 1. ...

  9. 利用js实现倒计时

    倒计时 这个名词并不陌生,比如:天猫,京东等一些网上商城都会推出一些限时特价商品,今天我们就一起编写一个属于自己的倒计时: Ps: 首先做一件事情的时候,不应该盲目的去做,应该首当其冲的去想,脑子里面 ...

  10. PHP.30-TP框架商城应用实例-后台6-商品会员价格删除-外键，级联操作

    商品会员价格删除 需求:当删除一件商品时,这件商品对应的会员价格也应该从会员价格表{price,level_id,goods_id}中删除掉. 有两种删除方法 1.在钩子函数_before_delet ...