JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果
一、photos.html页面，点击每一张缩略图，就在占位符的位置那里，显示对应的大图。
看到的页面效果是这样的：
1、实现思路
这个功能在之前的JavaScript美术馆那里已经实现了。
首先在页面中使用ul列表显示出所有的缩略图，然后使用JavaScript，for循环检查出当前点击的是哪一张图片，最后把这张图片给显示出来。
用到三个函数：显示图片函数、创建占位符预装图片、点击显示图片
（1）制作四张400px*300px的图片，然后把这四张图片缩小到100*100px的缩略图。把这八张图片都放进images/photos的文件夹里。
（2）新建一个photos.html
首先，把template.html的代码拷贝到photos.html中；
然后，讲div为content的部分替换为如下：
&div id="content"&
&h1&Photos of the band&/h1&
&ul id="imagegallery"&
&a href="images/photos/basshead.jpg" title="我的图片1"&&img src="images/photos/thumbnail_basshead.jpg" alt="漂亮的图片"/&&/a&
&a href="images/photos/bassist.jpg" title="我的图片2"&&img src="images/photos/thumbnail_bassist.jpg" alt="漂亮的图片"/&&/a&
&a href="images/photos/drummer.jpg" title="我的图片3"&&img src="images/photos/thumbnail_drummer.jpg" alt="漂亮的图片"/&&/a&
&a href="images/photos/lineup.jpg" title="我的图片4"&&img src="images/photos/thumbnial_lineup.jpg" alt="漂亮的图片"/&&/a&
3、修改webdesign.css样式
追加如下样式：#imagegallery li{
& & & & & & & & & & & display: & & &
& & & & & & & & & & }
4、创建photos.js。用来编写photos页面的js效果
/***********************显示图片*********************/
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
//获取元素
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
//显示图片
placeholder.setAttribute("src",source);
//把当前图片的src赋值给占位符图片
//设置显示描述图片的文字
if(!document.getElementById("description")) return false;
if(whichpic.getAttribute("title")){
var text = whichpic.getAttribute("title");
var text = "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue =
return false;
/***************创建定位符预装图片***********************/
function preparePlaceholder(){
//浏览器对象检测
if(!document.getElementById) return false;
if(!document.createTextNode) return false;
if(!document.createElement) return false;
if(!document.getElementById("imagegallery")) return false;
//设置新创建元素的属性
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","./images/placeholder.png");
placeholder.setAttribute("alt","我的图片");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("请选择一张图片：");
description.appendChild(desctext);
//挂载显示新创建元素
var gallery = document.getElementById("imagegallery");
insertAfter(description,gallery);
insertAfter(placeholder,description);
/***************点击，显示图片*************************/
function prepareGallery(){
//对象检测
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("imagegallery")) return false;
//获取元素
var gallery = document.getElementById("imagegallery");
var links = document.getElementsByTagName("a");
//显示当前图片（for循环实现）
for(var i=0; i&links. i++){
links[i].onclick = function(){
return showPic(this);
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
5、打开浏览器浏览，看到效果，photos页面ok啦！
二、学与思
1、li的样式设置为inline
#imagegallery li{
& & & & & & & & & & & display: & & &
& & & & & & & & & & }
块级元素变成行内元素，这样子所有的li就能水平显示。
2、nodeType==3为文本节点类型
description.firstChild.nodeType == 3
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果.没有写JavaScript之前看到的效果:实现后的效果图:这个就是我们现在要做的效果.1.背景:我们在about.html页面中写了一个ul列表,然后接着是一段对每个列表的标题 ...
原文:JavaScript网站设计实践(七)编写最后一个页面 改进表单一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检查必填字段是否填写.填写格式是否符合要求等. 每个表单里面,当获取到输入焦点时,令提示文本 ...
这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录下实现这个乐队的宣传网站的具体过程,加深理解.好,从现在开始来实现这个JavaScript网站实战. 一.网页的结构 由三个部分组成:头部.导航.内容 效果图是 ...
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写Jav ...
一.编写live.html页面,1.JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示:2.是输出表格中的abbr标签的内容 实现后的效果图是这样的: 1.实现思路 在输出表格的时候,给出一个判断,如果偶数或是奇数行我们想换色,则添加一个class为odd的值,在这个class里就设置了表格不同颜色tr行. 这里用到了一个判断函数:(下面 ...
一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页面大概内容是什么. 效果图: 2.实现这个效果的思路 (1)把主页的几个链接的背景图片缩放到150px*150px,拼成一张750*150的图片,并保存为sli ...
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include进来.这样,当要对导航栏进行修改时,只需要修改一个文件,而不用修改所有相关的页面文件.不过,我这里没有这样做,没有抽取出来. 二.实现当前页面的标识+不同页面的 ...
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践.这个列表请参考 Best Practices for Speeding Up Your Web Site
http://developer.yaho ...jquery实现点击图片全屏放大查看效果带有自动加载特效
下载资源()次
阅读次数()次
发布时间：
用法简介：
jquery实现点击图片全屏放大查看效果带有自动加载特效代码引用：&script src=&lib/jquery-1.9.0.min.js&&&/script&&script src=&lib/ios-orientationchange-fix.js&&&/script&&script src=&source/jquery.swipebox.min.js&&&/script&&script type=&text/javascript&& jQuery(function($) {
$(&.swipebox&).swipebox(); });&/script&
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！