JavaScript美术馆

最新推荐文章于 2019-02-20 11:05:21 发布

樱缘之梦

最新推荐文章于 2019-02-20 11:05:21 发布

阅读量378

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_28409193/article/details/71435570

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<head>
<style type="text/css">
body{
color:#333;
background:#ccc;
margin:1em 10%;
}
h1{
  color:#333;
  background:transparent;
}
a{
  color:#c6o;
  background:transparent;
  font-weight:bold;
text-decoration：none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}
</style>
</head>
<body>
<h1>Picture</h1>
<ul>
<li>
<a href="img/1.jpg" οnclick="showPic(this); return false;" title="1">1</a>
</li>
<li>
<a href="img/2.jpg" οnclick="showPic(this); return false;" title="2">2</a>
</li>
<li>
<a href="img/3.jpg" οnclick="showPic(this); return false;" title="3">3</a>
</li>
<li>
<a href="img/4.jpg" οnclick="showPic(this); return false;" title="4">4</a>
</li>
<img id="placeholder" src="img/placeholder.gif" alt="my img"/>
</ul>
<script type="text/javascript">
function  showPic(w){
      var source=w.getAttribute("href");
      var placeholder=document.getElementById("placeholder");
    
    placeholder.setAttribute("src",source);
}

</script>
</body>
</html>

注重效果，没怎么用排版，选自JavaScript DOM编程艺术