点击图片改变背景的demo-学习第二天
实例代码：
<!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-学习第二天的更多相关文章
- ios-点击图片放大,背景变半透明
在view中点击一个图片,图片放大,背景变半透明,图片不会变透明的效果图如下 思路:图片框是一个按钮,监听点击事件. 当点击图片后:改变图片的frame,使图片放大,并且在controller.vie ...
- css3 实现png图片改变背景颜色
实际上是用的是就是css的filter的drop-shadow属性 drop-shadow: 1 不支持内阴影 2 不支持多阴影 3 兼容性 ie13+ 谷歌 火狐 android4.4+ i ...
- （1）vue点击图片预览（可旋转、翻转、缩放、上下切换、键盘操作）
今天做项目的时候,遇到了新需求,需要把点击图片放大的功能.学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewer ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- iOS 创建多个button实现点击改变背景颜色
工程中需要实现与UISegmentedControl效果相似的一排一共十个button,如下图.但是SegmentedControl修改不太方便,就用button替代, 循环创建十个button,点击 ...
- UITableViewCell添加点击时改变字体的颜色、背景、图标
改变字体颜色:cell.textLabel.highlightedTextColor 改变背景颜色:cell.selectedBackgroundView (必须是图片哦) 改变图标颜色:cell.i ...
- css3-11 如何改变背景图片的大小和位置
css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...
- Android中通过xml改变背景及文字颜色
原创文章,转载请注明出处,谢谢! 本篇主要介绍Android开发中,通过XML资源文件来设置控件在不同状态下的背景及文字颜色.关于xml改变背景及文字颜色的原理,大家可以去看一下郭霖大神的源码分析文章 ...
- 《IT蓝豹》吹雪花demo,学习android传感器
吹雪花demo,学习android传感器 吹雪花demo,学习android传感器,嘴巴对着手机底部吹一下就会出现飘着雪花效果. 算是学习android传感器效果.本例子主要是通过android.me ...
随机推荐
- 网上商城_数据库jar包的使用
网上商城_数据库jar包的使用 0.导入数据库相关jar包 commons-dbutils-1.4.jar c3p0-0.9.1.2.jar 1.配置C3P0-config.xml文件 <?xm ...
- Linux新建用户后的必要设置
系统:ubnutu 18.04 x64 以下操作全在root下 准备工作: 新建用户 useradd -m tom 初始化密码 passwd tom 1. tab按键 不能自动单词不全 # ...
- BAT及各大互联网公司2014前端笔试面试题
很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...
- [异常笔记] spring cloud 服务消费者启动-2018040501
一.异常信息: Error starting ApplicationContext. To display the auto-configuration report re-run your appl ...
- C语言基础篇（一）关键字
导航: 1. 数据类型 !!! 2. 自定义类型 !!!! 3. 逻辑结构 4. 类型修饰符 !! 5. 杂项 !! ----->x<------------->x<----- ...
- python——input()函数
在使用input()内置函数输入数字时,要注意一点: input()的返回值始终是字符串,所以type(number)永远是<class 'str'>! 如: >>> t ...
- [Luogu3806]点分治
询问树上是否存在距离为k[i]的点对 直接点分治把所有距离预处理出来,然后O(1)回答即可 Code #include <cstdio> #include <algorithm> ...
- Servlet HttpRequest 中【getAttribute】和【getParameter】的区别
1.获取的值不同 getAttribute表示从request范围取得设置的属性,必须要通过setAttribute设置属性,才能通过getAttribute取得.设置和取得的值都是Object类型. ...
- P2985 [USACO10FEB]吃巧克力Chocolate Eating
P2985 [USACO10FEB]吃巧克力Chocolate Eating 题目描述 Bessie has received N (1 <= N <= 50,000) chocolate ...
- Centos7 查看Mysql配置文件
my.cnf是mysql启动时加载的配置文件,一般会放在mysql的安装目录中,用户也可以放在其他目录加载. 安装mysql后,系统中会有多个my.cnf文件,有些是用于测试的. 使用locate m ...