JavaScript学习基本语法

最新推荐文章于 2024-06-19 02:57:35 发布

伏特加的滋味

最新推荐文章于 2024-06-19 02:57:35 发布

阅读量352

点赞数

分类专栏： javaScript/jquery

本文链接：https://blog.csdn.net/yuanyuan214365/article/details/53176673

版权

javaScript/jquery 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

一：添加图片的实例程序
        要求 点击超链接能够实现跳转到一张图片，到一张图片在本页显示的程序 其中各个文件都在一个文件夹下，根据路径建立在文件夹下
html程序
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Image Gallery</title>
  <link rel="stylesheet" href="styles/layout.css" media="screen">
 </head>
 <body>
    <h1>Snapshots<h1>
<ul>
  <li>
    <a href="images/fireworks.jpg" οnclick="showPic(this);return false;" title="A fireWorks display">Fireworks</a>
  </li>
  <li>
    <a href="images/coffee.jpg" οnclick="showPic(this);return false;" title="A cup of black coffee">Coffee</a>
  </li>
  <li>
    <a href="images/rose.jpg" οnclick="showPic(this);return false;" title="A red red rose">Rose</a>
  </li>
  <li>
    <a href="images/bigben.jpg"οnclick="showPic(this);return false;"  title="The famous clock">Big Ben</a>
  </li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery">
    <p id="description">Choose an image.</p>
<script type="text/javascript" src="scripts/showPic.js"></script>
 </body>
</html>

javaScript程序：
function showPic(whichpic){
  var source=whichpic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text=whichpic.getAttribute("title");
  var description=document.getElementById("description");
  description.firstChild.nodeValue=text;
}

css程序：
body{
  font-family:"Helvetica","Arial",serif;
  color:#333;
  backgroud-color:#ccc;
  margin:1em 10%
}
h1{
  color: #333;
  background-color:transparents;
}
a{
  color:#c60;
  background-color:transparents;
  font-weight:bold;
  text-decoration:none;
}
u1{
  padding:0;
}
li {
  float:left;
  padding:1em;
  list-style:none
}
img{
  display:block;
  clear:both;
}