Vue学习记录-图片库，动态创建标记

最新推荐文章于 2024-04-29 17:09:45 发布

orangecloudy

最新推荐文章于 2024-04-29 17:09:45 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/106583226

版权

 function addLoadEvent(func){
  var oldonload = window.onload;
  if(typeof window.onload != "function"){
    window.onload = func;
  } else {
    window.onload = function(){
      oldonload();
      func();
    }
  }
}


function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if(targetElement == parent.lastChild){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function preparePlaceholder(){
  if(!document.createElement) return false;
  if(!document.createTextNode) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("imageGallery")) return false;
  var placeholder = document.createElement("img");
  placeholder.setAttribute("id","placeholder");
  placeholder.setAttribute("src","../images/Desert 1.jpg");
  placeholder.setAttribute("alt","my image gallery");
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("choose  an image");
  description.appendChild(desctext);
  var gallery = document.getElementById("imageGallery");
  insertAfter(placeholder,gallery);
  insertAfter(description,placeholder);
}


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

function prepareGallery(){
  if(!document.getElementsByTagName) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("imageGallery")) return false;
  var gallery = document.getElementById("imageGallery");
  var links = gallery.getElementsByTagName("a");
  for(i in links){
    links[i].onclick = function() {
      showPic(this);
      return false;
    }
  }
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

在前一篇博客的html中，去掉结尾的img,p标签；