素材图片2张;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>h.html</title>
<style type="text/css">
.cli{
width: 150px;
height: 130px;
background: orange;
float: left;
position: absolute;
left: 20px;
top: 100px;
opacity: 0;
}
.mt1{
width: 178px;
height: 336px;
}
.area1{
position: absolute;
left: 35px;
top:17px;
border: none;
border-radius: 10px;
overflow-y: visible;
}
.ff{
color: #fff;
}
</style>
<script type="text/javascript">
function mtcode(type){
// alert("piaoliao");
var pre1=document.getElementsByTagName('pre')[0];
var pre2=document.getElementsByTagName('pre')[0].innerHTML;
var mtimg=document.getElementsByTagName('img')[0];
var area1=document.getElementsByTagName('textarea')[0];
if (type==1) {
mtimg.src="img/mt2.png";
area1.innerHTML=pre2;
}
else if(type==2) {
mtimg.src="img/mt1.png";
area1.innerHTML='';
}
else{
location.reload();
}
}
</script>
</head>
<body>
<!-- title text -->
<!-- div1 mt img -->
<div class="mt1">
<img src="img/mt1.png"/>
</div>
<!-- div2 click function -->
<div class="cli" onclick="mtcode(1)" ondblclick="mtcode(2)">
</div>
<!-- div3 jdbc link code -->
<div class="sqltxt">
<pre class="ff">
Connection con;
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/sqltestdb";
String user = "root";
String password = "123456";
try {
Class.forName(driver);
con = DriverManager.getConnection(url,user,password);
if(!con.isClosed())
System.out.println("Succeeded connecting to the Database!");
Statement statement = con.createStatement();
String sql = "select * from emp";
}
(Exception e) {
// TODO: handle exception
e.printStackTrace();
}
</pre>
</div>
<!-- div form area-->
<textarea class="area1" rows="7" cols="15"></textarea>
</body>
</html>
效果:点击马桶盖,打开【面板】显示,双击关闭
效果图,贴上代码自己跑一下