JavaScript小白基础入门-js dom编程艺术5-CSS和动画（附效果图和源码）

多敲敲敲，好想要个键盘，能敲烂的内种，最近还刚好61和618，好纠结呐。还有想学网络，下了计算机网络自顶向下的电子书，打算看来着，有需要的可以找我要哦~ 害，还是来贴DOM学习的笔记。这里有两个案例，一个是提取缩略语、链接之类的用列表或表格展示出来，还有一些用DOM操作的样式；另一个是动画版的图片库，有点像banner。

这个效果图的代码是
table.js文件：

/**
 * 把快捷键提出来，保存到表格中，表格设置隔行颜色效果
 */

function getAccessKey(){
  if(!document.getElementById) return false;
  if(!document.getElementsByTagName) return false;
  var acclist = document.getElementById("acclist");
  var alinks = acclist.getElementsByTagName("a");
  var acc_arr = Array();
  for(var i = 0; i < alinks.length; i++){
    var ak = alinks[i].getAttribute("accessKey");
    if(!ak) continue;
    var txt = alinks[i].firstChild.nodeValue;
    acc_arr[ak] = txt;
  }
  return acc_arr;
}

function createTable(){
  if(!document.createElement) return false;
  if(!document.createTextNode) return false;
  if(getAccessKey().length < 1) return false;
  var acc_arr = getAccessKey();
  var table = document.createElement("table");
  var caption = document.createElement("caption");
  var thead = document.createElement("thead");
  var tbody = document.createElement("tbody");
  var h_tr = document.createElement("tr");
  var h_th1 = document.createElement("th");
  var h_th2 = document.createElement("th");
  caption.appendChild(document.createTextNode("快捷键清单"));
  h_th1.appendChild(document.createTextNode("快捷键"));
  h_th2.appendChild(document.createTextNode("名称"));
  h_tr.appendChild(h_th1);
  h_tr.appendChild(h_th2);
  thead.appendChild(h_tr);
  
  for(key in acc_arr){
    var b_tr = document.createElement("tr");
    var b_td1 = document.createElement("td");
    var b_td2 = document.createElement("td");
    b_td1.appendChild(document.createTextNode(key));
    b_td2.appendChild(document.createTextNode(acc_arr[key]));
    b_tr.appendChild(b_td1);
    b_tr.appendChild(b_td2);
    tbody.appendChild(b_tr);
  }
  table.appendChild(caption);
  table.appendChild(thead);
  table.appendChild(tbody);
  var acclist = document.getElementById("acclist");
  insertAfter(table, acclist);
}

//设置表格隔行样式
function stripeTables(){
  if(!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  if(tables.length < 1)return false;
  var odd, rows;
  for(var i = 0; i < tables.length; i++){
    add = false;
    rows = tables[i].getElementsByTagName("tr");
    for(var j = 0; j < rows.length; j++){
      if(odd == true){
        // rows[j].style.backgroundColor = "#ffc";
        addClass(rows[j], "odd");
        odd = false;
      }else{
        odd = true;
      }
    }
  }
}

//设置表格响应事件
function highlightRows(){
  if(!document.getElementsByTagName) return false;
  var rows = document.getElementsByTagName("tr");
  for(var i = 0; i < rows.length; i++){
    rows[i].onmouseover = function(){
      this.style.fontWeight = "bold";
    }
    rows[i].onmouseout = function(){
      this.style.fontWeight = "normal";
    }
  }
}

//为每个
后一个元素添加className样式
function changeAfterH5CSS(tag, clasName){
  if(!document.getElementsByTagName) return false;
  var h5s = document.getElementsByTagName(tag);
  for(var i = 0; i < h5s.length; i++){
    var elem = getNextElement(h5s[i].nextSibling);
    if(elem){
      addClass(elem, clasName);
    }
  }
}

addLoadEvent(createTable);
addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
addLoadEvent(changeAfterH5CSS("h5", "special"));

util.js文件

//文档加载完时立即执行函数，给window.onload添加函数
function addLoadEvent(func){
  var oldonload = window.onload;
  if(typeof window.onload != 'function'){
      window.onload = func;//若window.onload事件还没添加函数，就直接添加函数
  }else{
    window.onload = function(){
      oldonload();
      func();
    }
  }
}

//向后插入元素
function insertAfter(newElement, targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement, targetElement.nextSibling);
  }  
}

//DOM检索下一个元素节点
function getNextElement(node){
  if(node.nodeType == 1){
    return node;
  }
  if(node.nextSibling){//若有下个兄弟节点，递归下个兄弟节点是否为元素结点
    return getNextElement(node.nextSibling);
  }
  return null;//不是元素，且没有下个节点
}

//添加class属性
function addClass(element, value){
  if(!element.className){
    element.className = value;
  }else{
    var newClassName = element.className;
    newClassName += " ";
    newClassName += value;
    element.className = newClassName;
  }
}

//动画：移动元素
function moveElement(elementId, final_x, final_y, interval){
  if(!document.getElementById) return false;
  var elem = document.getElementById(elementId);
  if(!elem) return false;
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if(xpos == final_x && ypos == final_y) return true;
  if(xpos < final_x){
    xpos++;
  }
  if(xpos > final_x){
    xpos--;
  }
  if(ypos < final_y){
    ypos++;
  }
  if(ypos > final_y){
    ypos--;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
  movement = setTimeout(repeat, interval);
}

table.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="table.css">
</head>
<body>
  <h5>网页快捷键</h5>
  <span>Home</span>
  <span>Back</span>
  <span>等等</span>
  <h5>网页快捷键</h5>
  <i>Home</i>
  <span>Back</span>
  <span>等等</span>
  <h5>网页快捷键</h5>
  <em>Home</em>
  <span>Back</span>
  <span>等等</span>

  <ul id="acclist">
    <li><a href="#" accesskey="1">Home</a></li>
    <li><a href="#" accesskey="2">Back</a></li>
    <li><a href="#" accesskey="4">Search</a></li>
    <li><a href="#" accesskey="9">Tel</a></li>
    <li><a href="#" accesskey="0">Accesskeys</a></li>
  </ul>
  <script src="../util.js"></script>
  <script src="./table.js"></script>
</body>
</html>

table.css文件

table{
  border: 1px #999 solid;
}
caption{
  padding: .5em;
  font-size: 1.2em;
  font-weight: bold;
}
th{
  background-color: yellowgreen;
  font-weight: normal;
  text-align: left;
}
th,td{
  width: 10em;
  padding: .5em;
}

.special{
  display: inline-block;
  background: pink;
  font-style: normal;
  padding: 0.5em;
  font-weight: bold;
}
.odd{
  background: #ffc;
}

test.js文件

function showPic(){
  if(!document.getElementById) return false;
  var list = document.getElementById("content");
  if(!list) return false;
  var items = list.getElementsByTagName("li");
  //设置动画
  items[0].onmouseover = function(){
    moveElement("replace", 0, 0, 10);
  }
  items[1].onmouseover = function(){
    moveElement("replace", 0, -250, 10);
  }
  items[2].onmouseover = function(){
    moveElement("replace", 0, -500, 10);
  }
  items[3].onmouseover = function(){
    moveElement("replace", 0, -750, 10);
  }
  items[4].onmouseover = function(){
    moveElement("replace", 0, -1000, 10);
  }
}

function prepareReplace(){
  if(!document.createElement) return false;
  if(!document.createTextNode) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("content")) return false;
  var div = document.createElement("div");
  var para = document.createElement("p");
  var para_txt = document.createTextNode("点击改变图片");
  var img = document.createElement("img");
  div.setAttribute("id", "showArea");
  para.setAttribute("id", "picName");
  para.appendChild(para_txt);
  img.setAttribute("id", "replace");
  img.setAttribute("src", "image/series.png");
  img.setAttribute("alt", "小肥宅推荐");
  //添加样式
  // div.style.overflow = "hidden";
  img.style.position = "absolute";
  img.style.top = "0px";
  img.style.left = "0px";
  //添加
和到

  div.appendChild(para);
  div.appendChild(img);
  //添加
到
清单后
  var content = document.getElementById("content");
  insertAfter(div, content);
}

function moveElement(elementId, final_x, final_y, interval){
  if(!document.getElementById) return false;
  var elem = document.getElementById(elementId);
  if(!elem) return false;
  if(elem.movement){
    clearTimeout(elem.movement);
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if(xpos == final_x && ypos == final_y) return true;
  var dist;
  if(xpos < final_x){
    dist = (final_x - xpos)/10;
    xpos += dist;
  }
  if(xpos > final_x){
    dist = (xpos - final_x)/10;
    xpos -= dist;
  }
  if(ypos < final_y){
    dist = (final_y - ypos)/10;
    ypos += dist;
  }
  if(ypos > final_y){
    dist = (ypos - final_y)/10;
    ypos -= dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat, interval);
}

addLoadEvent(prepareReplace);
addLoadEvent(showPic);

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/showPic.css">
</head>
<body>
  <h5>基础图片库</h5>
  <div id="container">
  <ul id="content">
    <li>
      <img src="image/111.gif" title="LOVE野良神" alt="LOVE野良神"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/222.jpg" title="野良神好帅鸭" alt="野良神好帅鸭"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/333.jpg" title="野良神，我是你的小迷妹" alt="野良神，我是你的小迷妹"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/444.gif" title="野良神，你们怎么不在一起" alt="野良神，你们怎么不在一起"></img>
      <span class="arrow"></span>
    </li>
    <li>
      <img src="image/555.jpg" title="野良神，你好逗哦" alt="野良神，你好逗哦"></img>
      <span class="arrow"></span>
    </li> 
  </ul>
</div>
  <script src="../util.js"></script>
  <script src="./js/test.js"></script>
</body>
</html>

showPic.css文件

h5{
  display:inline-block; 
  margin: 0;
  margin-bottom: 10px;
  padding: 6px 10px;
  background-color: orange;
}
#container{
  display: flex;
  flex-direction: wrap;
  justify-content: flex-start;
}
ul{
  /* width: 300px; */
  padding: 0;
  margin: 0;
  background: black;
}
li{
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
li img{
  height: 50px;
  width: 100px;
}
.arrow{
  position: absolute;
  right: 0px;
  width: 12px;
  height: 12px;
  margin-top: 16px;
  margin-right: 10px;
  border-top: 3px white solid ;
  border-right: 3px white solid ;
  transform: rotate(45deg);
}
a{
  flex: 1;
  display: block;
  color: white;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  padding-right: 50px;
  text-decoration: none;
  font-size: 16px;
}
#showArea{
  position: relative;
  width: 500px;
  height: 250px;
  overflow: hidden;
}
#picName{
  position: absolute;
  top: 0;
  left: 10px;
  color: white;
}
#replace{
  height: 1250px;
}

这是用到的雪碧图（虽然是ps很粗略拼的，好像拼接的还不太准嘞= =b凑活凑合吧，拿来欣赏也好~）