实例代码：

<!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. Maven - 依赖范围<scope></scope>

    6种:

  2. Linux - 用户环境变量的查看与设置

    1. 查看当前有哪些环境变量 直接输入命令:env 2. 设置用户环境变量 输入命令:vim ~/.bash_profile,打开文件,输入如下内容: 范例(设置maven环境变量): export ...

  3. Q&A - Nginx是做什么的？tomcat结合Nginx使用小结

    相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...

  4. DB设计工具——dbschema

      Preface       I've got a db design job about meeting room booking system last week.There're many s ...

  5. linux文件属性更改命令

    chown 当我们要改变一个文件的属主,我们所使用的用户必须是该文件的属主而且同时是目标属组成员,或超级用户.只有超级用户的才能改变文件的属主. chown语法: chown  [选项]...[所有者 ...

  6. IntelliJ IDEA 12详细开发教程（一）思想的转变与新手入门【转】

    转载地址:http://bangqu.com/alicas/blog/433 从事软件开发工作以来,提高自己的开发效率,提高自己编码的规范,提高编码深度层次,这三样一直都是自己努力去追求的事情. 最近 ...

  7. php集成开发环境xampp的搭建

    一:运维闲谈 作为一名linux运维工程师,在确保能够有熟练的服务器的搭建和维护优化技能的前提,还需对自身解决问题方法上做出一番功夫. 如何为自己的运维工作添砖加瓦,自动化运维便变得非常重要,一方面, ...

  8. Python3.6+pyinstaller+Django

    方案(一)Python3.6+pyinstaller+windows服务 一.Python3.6(64位)环境清单 Django==1.11.7 django-windows-tools==0.2 P ...

  9. 判断移动端和pc端最简单的方法

    <!DOCTYPE html><html><head> <title></title> <script type="text ...

  10. C语言进阶—— 逻辑运算符分析15

    印象中的逻辑运算符: ---学生:老师,在我的印象中,逻辑运算符用在条件判断的时候,真挺简单的,还有必要深究吗? ---老师:逻辑运算符确实在条件判断的时候用的比较多,但是并不能说简单... 请思考下 ...