点击图片改变背景的demo-学习第二天
2024-09-06 20:51:30
实例代码:
<!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>
最新文章
- velocity中$springMacroRequestContext.getMessage($code)
- SQL Server 的表数据简单操作(表数据查询)
- 更改XAMPP中MySQL数据库的端口号
- 在table中进行内容搜索
- Effective C++ -----条款29:为“异常安全”而努力是值得的
- IndexOf(";authentication failed";) >; -1
- JAVA设计模式之合成模式
- php curl 分离header和body信息
- 清除windows的EFS加密
- js生成验证码并且判断
- P4语言编程快速开始 实践二
- 走进 Xamarin Test Recorder for Xamarin.Forms
- 入门级Nginx反向代理nodejs
- django - 总结 - cnblog 知识点
- 跳台阶(JAVA)
- Pycharm创建Django项目并访问Django
- x11 VNC远程桌面
- c# 二分查找法
- lrzsz 移植到 ARM-linux 嵌入式板子上
- Arrays.sort()的底层实现