您的位置：首页 > Web前端 > JavaScript

web前端之JavaScript DOM编程艺术之案例研究:图片库改进版

2016-11-23 14:44 459 查看

web前端之JavaScript DOM编程艺术之案例研究:图片库改进版

window.onload=prepareGallery;能进行相应的执行。但是如果有两个函数就不行了。

window.onload=firstGallery;

window.onload=secondGallery;

第二个会把第一个给替换了。

window.onload=function(){
window.onload=firstGallery;
window.onload=secondGallery;
}

这样就可以完美解决了。

第三种，使用弹性最佳的解决方案—-不管加载完毕时执行多少个函数，他都可以应付自如。这个函数的名字是addLoadEvent。下面就是addLoadEvent函数将要完成的操作：

把现有的window.onload事件处理函数的值存入变量oldonload。

如果在这个处理函数上还没有绑定任何函数，就像平时一样把新函数添加给他

如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾

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

addLoadEvent(firstGallery);
addLoadEvent(secondGallery);

这样就可以加载进去了

三元操作符:

var text =whichpic.getAttribute(“title”) ? whichpic.getAttribute(“title”) : “”;

问号后面的是变量text两种可取值。如果getAttribute(“title”)的返回值不是null，text变量将被赋值第一个值；否则被赋值第二个值。

variable=condition ? if true : if false ;

键盘访问:

links[i].onclick=function(){
return showPic(this) ? false :true;
}
links[i].onkeypress=function(){
return showPic(this) ? false :true;
}

或:
links[i].onclick=function(){
return showPic(this) ? false :true;
}
links[i].onkeypress=links[i].onclick;

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Images Gallery</title>
<style type="text/css">
body{
font-family: "Helvetica","Arial",serif;
color:#333;
background: #ccc;
margin: 1em 10px;
}
h1{
color: #333;
background: transparent;//背景透明
}
a{
color: #c60;
background: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
#imagegally{
list-style: none;
}
#imagegally li{
display: inline;
}
#imagegally li a img{
border: 0;
}
#placeholder{
width: 900px;
height: 500px;
}
img{
display: block;
clear: both;//清除浮动
}
</style>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload != 'function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}

function showPic(whichpic){
if(!document.getElementById("placeholder")){
return false;
}
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
if(placeholder.nodeName != "IMG"){
return false;
}
placeholder.setAttribute("src",source);

if(document.getElementById("description")){
if(whichpic.getAttribute("title")){
var text=whichpic.getAttribute("title");
}else{
text="";
}

var description=document.getElementById("description");
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}

}
return true;

}

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(var i=0;i<links.length;i++){
links[i].onclick=function(){
//return !showPic(this);//是否返回一个false值以取消onclick时间的默认行为,其实应该由showPic函数决定.如果成功返回true,如果失败返回false
return showPic(this) ? false :true;
}
}

}

addLoadEvent(prepareGallery);
</script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="1.jpeg" title="1">
<img src="1.jpeg" alt="1">
</a>
</li>
<li>
<a href="2.jpeg" title="2">
<img src="2.jpeg" alt="2">
</a>
</li>
<li>
<a href="3.jpeg" title="3">
<img src="3.jpeg" alt="3">
</a>
</li>
<li>
<a href="4.jpeg" title="4">
<img src="4.jpeg" alt="4">
</a>
</li>

</ul>
<img id="placeholder" src="5.jpeg" alt="my images gallery">
<p id="description">Choose an images.</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript web前端

相关文章推荐

新的分享

章节导航