html dom图库优化（一）

来源：互联网发布：淘宝怎么上架商品编辑：程序博客网时间：2024/05/17 21:44
<!DOCTYPE html>      <html>          <head>              <meta charset="utf-8" />              <title></title>                        </head>          <body>              <ul id="uls">                  <li>                      <a href="img/a.jpg"  title="a">a</a>                  </li>                  <li>                      <a href="img/b.jpg"  title="b">b</a>                  </li>                  <li>                      <a href="img/c.png"  title="c">c</a>                  </li>                  <li>                      <a href="img/d.png"  title="d">d</a>                  </li>                  <li>                      <a href="img/e.png"  title="e">e</a>                  </li>              </ul>              <img src="" id="pic" alt="请选择链接" width="600px" height="500px"/>              <p id="des">图片标题</p>              <script type="text/javascript">                                  //添加加载完成绑定事件                function addLoadEvent(func)                {                var Old=window.onload;                if(typeof window.onload !='function')                {                window.onload=func;                }                else                {                window.onload=function()                {                Old();                func();                                }                }                }                                addLoadEvent(prePic);                                function prePic()                {                if(!document.getElementById)                {                return false;                }                if(!document.getElementsByTagName)                {                return false;                }                if(!document.getElementById("uls"))                {                return false;                }                var ulNode=document.getElementById("uls");                var link=ulNode.getElementsByTagName("a");                for(var i=0;i<link.length;i++)                {                link[i].onclick=function()                {                if(showPic(this))                {                window.event.returnValue=false;                                }                }                }                }                                function showPic(node)                  {                  if(!document.getElementById("pic"))                {                return false;                }                    var src=node.getAttribute("href");                      var imgNode=document.getElementById("pic");                      imgNode.setAttribute("src",src);                    if(document.getElementById("des"))                    {                    var text=node.getAttribute("title");                      var desNode=document.getElementById("des");                      desNode.firstChild.nodeValue=text;                                          }                    return true;                }              </script>          </body>      </html>
阅读全文
0 0