手风琴特效 transition
2024-10-20 16:42:19
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
</style>
</head> <body>
<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">
<div id="d1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onMouseOver="bian(1)"><img src="路易十三/logo.png" ></div>
<div id="d2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onMouseOver="bian(2)"></div>
<div id="d3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onMouseOver="bian(3)"></div>
<div id="d4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onMouseOver="bian(4)"></div>
<div id="d5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onMouseOver="bian(5)"></div>
</div>
<br>
<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">
<div id="dd1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onClick="biann(1)"></div>
<div id="dd2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onClick="biann(2)"></div>
<div id="dd3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onClick="biann(3)"></div>
<div id="dd4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onClick="biann(4)"></div>
<div id="dd5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onClick="biann(5)"></div>
</div><br> <div style=" width:2500px; height:300px; background-color:#111111; position:relative;"></div>
</body>
</html>
<script language="javascript1.1">
function bian(n)
{
if(n==1){
document.getElementById("d1").style.left="";
document.getElementById("d2").style.left="500px";
document.getElementById("d3").style.left="550px";
document.getElementById("d4").style.left="600px";
document.getElementById("d5").style.left="650px";
}
else if(n==2){
document.getElementById("d1").style.left="";
document.getElementById("d2").style.left="50px";
document.getElementById("d3").style.left="550px";
document.getElementById("d4").style.left="600px";
document.getElementById("d5").style.left="650px";
}
else if(n==3){
document.getElementById("d1").style.left="";
document.getElementById("d2").style.left="50px";
document.getElementById("d3").style.left="100px";
document.getElementById("d4").style.left="600px";
document.getElementById("d5").style.left="650px";
}
else if(n==4){
document.getElementById("d1").style.left="";
document.getElementById("d2").style.left="50px";
document.getElementById("d3").style.left="100px";
document.getElementById("d4").style.left="150px";
document.getElementById("d5").style.left="650px";
}
else if(n==5){
document.getElementById("d1").style.left="";
document.getElementById("d2").style.left="50px";
document.getElementById("d3").style.left="100px";
document.getElementById("d4").style.left="150px";
document.getElementById("d5").style.left="200px";
}
}
function biann(n)
{
if(n==1){
document.getElementById("dd1").style.left="";
document.getElementById("dd2").style.left="500px";
document.getElementById("dd3").style.left="550px";
document.getElementById("dd4").style.left="600px";
document.getElementById("dd5").style.left="650px";
}
else if(n==2){
document.getElementById("dd1").style.left="";
document.getElementById("dd2").style.left="50px";
document.getElementById("dd3").style.left="550px";
document.getElementById("dd4").style.left="600px";
document.getElementById("dd5").style.left="650px";
}
else if(n==3){
document.getElementById("dd1").style.left="";
document.getElementById("dd2").style.left="50px";
document.getElementById("dd3").style.left="100px";
document.getElementById("dd4").style.left="600px";
document.getElementById("dd5").style.left="650px";
}
else if(n==4){
document.getElementById("dd1").style.left="";
document.getElementById("dd2").style.left="50px";
document.getElementById("dd3").style.left="100px";
document.getElementById("dd4").style.left="150px";
document.getElementById("dd5").style.left="650px";
}
else if(n==5){
document.getElementById("dd1").style.left="";
document.getElementById("dd2").style.left="50px";
document.getElementById("dd3").style.left="100px";
document.getElementById("dd4").style.left="150px";
document.getElementById("dd5").style.left="200px";
}
}
</script>
最新文章
- storm 集群配置
- 获取FIle路径下所有文件的地址和名称
- Is It A Tree?[HDU1325][PKU1308]
- 【7集iCore3基础视频】7-6 Quartus II 13.1安装
- jQuery.fn.extend() 与 jQuery.extend()
- 关于this,super的来源猜想
- Html5 Canvas transform setTransform
- 自定义 SqlHelp
- iOS 高级框架的介绍
- 数据库还原总提示空间不够，磁盘卷 'D:\' 上的可用空间不足，无法创建数据库
- 知问前端——创建header区
- Mysqlbinlog使用
- Windows Azure 微软公有云体验(二) 存储成本比较分析
- java jvm学习笔记三（class文件检验器）
- Quartz Sheduler 入门
- JDBC技术
- 用js来实现那些数据结构05（栈02-栈的应用）
- 【Java】数组转List常见方式的对比
- pta寒假作业3
- [UE4]瞬移