实例代码：

<!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. MySQL为何不建议使用null列

      Preface       Null is a special constraint of columns.The columns in table will be added null cons ...

  2. python join() 提示UnicodeDecodeError: 'utf8' codec can't decode byte 0xcb in position 0: unexpected end of的原因及解决办法

    问题: 在使用join()将列表元素连接成字符串时出错如下 return split.join(result) UnicodeDecodeError: 'utf8' codec can't decod ...

  3. Python容器--list, tuple, dict, set

    ## Python 中有四种用于存放数据的序列--list, tuple, dict, set ## list 列表 - 可以存放任意类型数据的有序序列 - 列表可以由零个或多个元素组成,元素之间用逗 ...

  4. redhat 配置本地yum源

    redhat配置3个源就够了: 1.本地yum源,就是你本地的ISO 2.配置163源 3.配置epel源 环境:redhat7 + vmw 12 pro 1.配置本地yum源 要配置本地源,需要先把 ...

  5. PHP.35-TP框架商城应用实例-后台11-商品分类-删除分类(2种方法)、添加、修改

    删除分类 删除一个分类的同时,其所有子分类都删除 在控制器CategoryCtroller.class.php中添加删除函数(delete) 在分类模型中添加钩子函数_before_delete()[ ...

  6. 算法学习记录-图——应用之关键路径（Critical Path）

    之前我们介绍过,在一个工程中我们关心两个问题: (1)工程是否顺利进行 (2)整个工程最短时间. 之前我们优先关心的是顶点(AOV),同样我们也可以优先关心边(同理有AOE).(Activity On ...

  7. 教你一步学会安装Hue

    一.简介 hue是一个开源的apache hadoop ui系统,由cloudear desktop演化而来,最后cloudera公司将其贡献给了apache基金会的hadoop社区,它基于pytho ...

  8. MyEclipse - MyEclipse优化

    1.去除不需要的启动加载项 选择菜单:Window --> Preferences -->General --> Startup and Shutdown, 可以关掉的启动项有: J ...

  9. 《Cracking the Coding Interview》——第1章：数组和字符串——题目4

    2014-03-18 01:36 题目:给定一个字符串,将其中的空格‘ ’替换为‘%20’,你可以认为字符串尾部有足够空间来容纳新增字符.请不要额外开辟数组完成. 解法:先从前往后统计空格个数,然后从 ...

  10. nginx清除反向代理缓存

    nginx重启无法清除反向代理的缓存,可以清空安装目录下的proxy_cache文件夹里的内容来清除.