function tuPian(x){
var href,imgs,txt;
if(!document.getElementById('imgs')){return false}
href=x.getAttribute('href');
imgs=document.getElementById('imgs');
imgs.setAttribute('src',href);
if(document.getElementsByTagName('p')){
txt=x.getAttribute('title');
p=document.getElementsByTagName('p')[0];
p.firstChild.nodeValue=txt;
}
return true;
}
function neiZhi(){
if(!document.getElementById||!document.getElementsByTagName)return false;
if(!document.getElementById('aJ'))return false;
var aJ=document.getElementById('aJ');
var aas=aJ.getElementsByTagName('a');
for(var i=0;i<aas.length;i++){
aas[i].onclick=function(){
return !tuPian(this);
}
}
}
function addOnloadEvent(x){
var oldOnLoad=window.onload;
if(typeof oldOnLoad!='function'){
window.onload=x;
}else{
window.onload=function(){
oldOnLoad();
x();
}
}
}
addOnloadEvent(neiZhi);
function afterNode(x,y){
var w=y.parentNode;
if(y==w.lastChild){
w.appendChild(x);
}else{
w.insertBefore(x,y.nextSibling);
}
}
function p(){
var img=document.createElement('img');
img.id='imgs';
img.src='img/cool (3).jpg';
var p=document.createElement('p');
p.innerHTML='这是图片的描述';
var aJ=document.getElementById('aJ');
afterNode(p,aJ);
afterNode(img,aJ);
}
addOnloadEvent(p);<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js的艺术</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <script src="js/js.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>Snapshots</h1> <ul id='aJ' > <li><a href="img/cool (1).png" title="摩登时代"><img src="img/cool (1).png" /></a></li> <li><a href="img/cool (2).gif" title="城市风光"><img src="img/cool (2).gif" /></a></li> <li><a href="img/cool (2).png" title="青色元素"><img src="img/cool (2).png" /></a></li> <li><a href="img/cool (4).jpg" title="唯美红绿"><img src="img/cool (4).jpg" /></a></li> </ul> </body> </html>
html,body,ul{
margin: 0;
padding: 0;
font-size: 18px;
}
h1{
margin-left: 20px;
transition: all 1s;
}
ul{
list-style: none;
}
li,img{
display: inline-block;
margin: 10px;
}
a{
text-decoration: none;
color: black;
font-family: arial;
}
p{
margin-left: 80px;
}
#imgs{
width: 290px;
height: 290px;
border: 5px solid gainsboro;
box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
li>a>img{
width: 50px;
height: 50px;
}上面是全部代码 里面有一个function addOnloadEvent(x){}函数 是用进行window.onload同时执行的；
addOnloadEvent(neiZhi);这个调用是触发图片切换函数；
addOnloadEvent(p);这个是创建一个img 和p标签的；
显然window.onload的执行顺序不是从上到下， 他们的逻辑顺序什么？
我爱吃牛排
相关分类