标签:popup xhtml images 介绍 二级联动 eval jpg rds har
今天是正式上课的第一天,彭老师先给我们介绍了一下基础班的课程大纲:3.5天HTML+3.5天CSS+7天javascript+2天jQuery+1天Bootstrap,做传智的官网、游戏官网、表单验证、二级联动、图片轮播、选项卡切换、伸缩菜单等等。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>网页标题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"></script> 11 </head> 12 <body> 13 <h1>Photos</h1> 14 15 16 17 <ul id = "imageGallery"> 18 <li> 19 <a href = "../images/mayday/12.jpg" title = "mayday12">mayday12</a> 20 </li> 21 <li> 22 <a href = "../images/mayday/13.jpg" title = "mayday13">mayday13</a> 23 </li> 24 <li> 25 <a href = "../images/mayday/14.jpg" title = "mayday14">mayday14</a> 26 </li> 27 <li> 28 <a href = "../images/mayday/15.jpg" title = "mayday15">mayday15</a> 29 </li> 30 </ul> 31 32 <p id = "description">啦啦啦啦啦</p> 33 <a href = "http://www.example.com/" class = "mayday";>打开一个新窗口</a> 34 <img id = "placeholder" src ="../images/mayday/5.jpeg" title = "mayday5" alt = "mayday5"/> 35 </body> 36 <script> 37 // var placeholder = document.getElementById("placeholder"); 38 // var img_src = placeholder.getAttribute("src"); 39 // img_src.setAttribute("src","../images/mayday/12.jpg"); 40 // function photoPic(placeholder){ 41 // 42 // } 43 // function showPic(whichpic){ 44 // var whichpic = document.getElementsByTagName("a"); 45 // var source = whichpic.getAttribute("href"); 46 // var placeholder = document.getElementById("placeholder"); 47 // placeholder.setAttribute("src",source); 48 // 49 // var text = whichpic.getAttribute("title"); 50 // var description = document.getElementById("description"); 51 // description.firstChild.nodeValue = text; 52 // 53 // 54 // } 55 56 57 1、js和标记分离前的函数: 58 function showPic(whichpic){ 59 //换图片 60 var source = whichpic.getAttribute("href"); 61 var placeholder = document.getElementById("placeholder"); 62 placeholder.setAttribute("src",source); 63 64 //换文字 65 var text = whichpic.getAttribute("title"); 66 var description = document.getElementById("description"); 67 description.firstChild.nodeValue = text; 68 } 69 70 71 // function countBodyChildren(){ 72 // var body_element = document.getElementsByTagName("body")[0]; 73 // alert(body_element.childNodes.length); 74 // 75 // 76 // } 77 // window.onload = countBodyChildren; 78 // event = "javascript statements();" 79 // function mayday(winURL){ 80 // window.open(winURL,"may","width = 550px,height = 550px"); 81 // } 82 // var links = document.getElementByTagName("a"); 83 // for(var i = 0;i < links.length;i++){ 84 // if(links[i].getAttribute("class") == "popup"){ 85 // links[i].onclick = function(){ 86 // } 87 // } 88 // } 89 // window.onload = preparelinks; 90 // function preparelinks{ 91 // var links = document.getElementById("a"); 92 // for(var i = 0;i<links.length;i++){ 93 // if(links[i].getAttribute("class") = "popup"){ 94 // link[i].onclick = function(){ 95 // popup(this.getAttribute("href")); 96 // return false; 97 // } 98 // } 99 // } 100 // } 101 // javascript:popUp(""); 102 103 function prepareGallery{ 104 if(!document.getElementById){ 105 return false; 106 } 107 if(!document.getElementsByTagName){ 108 return false; 109 } 110 if(!document.getEelemntById("imageGallery")){ 111 retrun false; 112 } 113 114 var gallery = document.getElementById("imageGallery"); 115 var links = gallery.getElementByTagName("a"); 116 for(var i = 0;i<links.length;i++){ 117 links[i].onclick = function(){ 118 showPic(this); 119 return false; 120 } 121 } 122 } 123 124 window.onload = prepareGallery; 125 </script> 126 </html>
标签:popup xhtml images 介绍 二级联动 eval jpg rds har
原文地址:http://www.cnblogs.com/jiangyujing/p/6100112.html