发表于: 2017-01-06 10:24:42

1 1558


今天完成的事情: 

今天主要还是看书,看了如何使用js实现一个图片库,

使得原本点击某个链接后跳转到新窗口展示图片的功能变成了

在原网页同时展示图片清单和新图片。

为了实现这个功能,需要在原网页插入一个“占位符”图片,设置其id为placeholder,

通过把“占位符”图片替换为想要查看的图片,在原页面展示不同的图片。

这里需要设置一个函数,function showPic(whichpic),whichpic代表一个元素节点,就是每个图片链接的<a>元素。

要展示图片,当然要获取该图片链接,也就是"href",这需要在whichpic元素上调用getAttribute得到,把"href"作为参数传递给getAttribute。

var source = whichpic.getAttribute("href");得到后把这个路径存入变量source。

之后还要获取“占位符”图片,使用getElementById,

var placeholder = getElementById("placeholder");得到后把这个元素赋给变量placeholder。

变量在这里一是为了简明易读,source和placeholder都是有意义的单词,二是为了减少工作量也就是代码量。

placeholder.setAttribute("src",source);

显然要比下面这么冗长的代码更容易阅读和理解:

document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute("href"));

现在获取链接包含的图片链接并将其赋给占位符图片的函数已经实现,需要做的就是在图片库文档里使用这个函数,

方法之一就是给图片列表的链接添加事件处理函数——onclick。

需要注意的是showPic()函数需要一个参数,一个带href属性的元素节点参数。onclick嵌入到一个链接中时,需要把这个连接本身作为函数参数,

这里就要用到关键字"this" onclick = "showpic(this);"

再点击链接时,为了避免默认的跳转到新窗口的行为,需要在onclick事件中添加return false,让它认为“这个链接没有被点击”,从而实现我们想要的效果。


明天计划的事情: 

继续阅读书本第六章内容,把书上给的例子用代码敲出来,试验下效果,注重js的实现过程。


遇到的问题:


收获:

达成目标的过程与目标本身同样重要。



返回列表 返回列表
评论

    分享到