首页 > 代码库 > 简单的图片显示

简单的图片显示

2024-10-26 13:17:02   212人阅读

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片浏览</title>
<link href="pic.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="pic/image1.jpeg" title="盛世美颜" onclick="showPic(this);return false;">帅照1</a></li>
        <li><a href="pic/image2.jpeg" title="帅哥" onclick="showPic(this);return false;">帅照2</a></li>
        <li><a href="pic/image3.jpeg" title="绝代美颜" onclick="showPic(this);return false;">帅照3</a></li>
        <li><a href="pic/image4.jpeg" title="朦胧帅" onclick="showPic(this);return false;">帅照4</a></li>
        <li><a href="pic/image5.jpeg" title="酷" onclick="showPic(this);return false;">帅照5</a></li>
        <li><a href="pic/image6.jpeg" title="傲娇" onclick="showPic(this);return false;">帅照6</a></li>
  <!--return false;onclick事件处理函数所触发的Javascript代码返回给它的值是false，
      （所以这个链接的默认行为没有被触发，所以不会打开图片查看器，不会打开一个新的网页。）即防止用户被带到目标链接窗口
        -->
    </ul>
    <p id="description">Choose a picture.</p>
   <img id="imgPlace" src="pic/封面.jpeg" alt="my image gallery">
    <script type="text/javascript">
      function showPic(thePic){
    //  event=event||window.event;
//      if(event.stopPropagation){
//          event.stopPropagation();
//      }
//      else{
//          event.cancelBubble=true;
//      }
          //实现图片切换
          var source=thePic.getAttribute("href");
          var imgPlace=document.getElementById("imgPlace");
          imgPlace.setAttribute("src",source);
          //实现文本切换
          var title=thePic.getAttribute("title");
          var description=document.getElementById("description");
          //alert(description.childNodes[0].nodeValue);
        //childNodes[0]==firstChild 正如 childNodes[node.childNodes.length-1]=lastChild
         description.firstChild.nodeValue=title;
      }
    // window.onload=function(){
//           var imgPlace=document.getElementById("imgPlace");
//           var orginPic=imgPlace.getAttribute("src");
//           // 点击页面空白处时 
//         document.onclick=function(){
//        // 显示导航页
//          imgPlace.setAttribute("src",orginPic);
//         }
//     }
    </script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/**{margin:0;padding:0;}*/

body{font-size:14px;
     width:100%;}

img{border:none;}

li{list-style:none;}
input,select,textarea{
                      outline:none;}

textarea{
         resize:none;}
h1{
    color:#333;
    background:transparent;}
a{
    text-decoration:none;
    color:#DB4E27;
    background:transparent;
    font-weight:bold;
 }
ul{
    width:900px;
    margin:0 auto;
    }
li{
    height:16px;
    line-height:16px;
    float:left;
    width:150px;
    /*margin:10px auto;*/
    margin-bottom:50px;
    text-align:center;
    }
p{
    clear:both;
    text-align:center;
    /*不定宽元素居中*/
    }
img{
    
    display:block;
    margin:5px auto;
    height:600px;
    weight:440px;
    }

没有办法上传图片文件包，看来我以后可能得选择github保存工作成果了

简单的图片显示


联系
我们