<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<style>
body{background-color: silver; }
#lay{width: 800px; height: 400px; padding: 0px; margin: auto; text-align: center; float: left;}
#text{background-color: #ccc; float: left; width: 20%; height: 100%;}
#text li{
border-bottom: #666 1px solid; width: 70px; list-style: none; margin-top: 50px;
}
#text a:hover{color: red;}
#image{float: left; width: 80%; height: 100%;}
#pic{height: 100%; width: 80%;}
</style>
</head>
<body>
<div id="lay">
<div id="text">
<ul>
<li><a onmouseover="showimage('img/1.jpg')">图片1</a></li>
<li><a onmouseover="showimage('img/2.jpg')">图片2</a></li>
<li><a onmouseover="showimage('img/3.jpg')">图片3</a></li>
<li><a onmouseover="showimage('img/4.jpg')">图片4</a></li>
<li><a onmouseover="showimage('img/5.jpg')">图片5</a></li>
</ul>
</div>
<div id="image"><img id="pic" src="img/1.jpg"></div>
</div>
</body>
<script>
function showimage(path){
var pic=document.getElementById('pic');
pic.src=path;
}
</script>
</html> 0
点赞
收藏
分享
Javascript代码
相关推荐
0 条评论
