JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

简介: 原文:JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果一、photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图。 看到的页面效果是这样的:   1、实现思路 这个功能在之前的JavaScript美术馆那里已经实现了。
原文: JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

一、photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图。

看到的页面效果是这样的:

 

1、实现思路

这个功能在之前的JavaScript美术馆那里已经实现了。

首先在页面中使用ul列表显示出所有的缩略图,然后使用JavaScript,for循环检查出当前点击的是哪一张图片,最后把这张图片给显示出来。

用到三个函数:显示图片函数、创建占位符预装图片、点击显示图片

2、代码

(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">
                <li>
                    <a href="images/photos/basshead.jpg" title="我的图片1"><img src="images/photos/thumbnail_basshead.jpg" alt="漂亮的图片"/></a>
                </li>
                <li>
                    <a href="images/photos/bassist.jpg" title="我的图片2"><img src="images/photos/thumbnail_bassist.jpg" alt="漂亮的图片"/></a>
                </li>
                <li>
                    <a href="images/photos/drummer.jpg" title="我的图片3"><img src="images/photos/thumbnail_drummer.jpg" alt="漂亮的图片"/></a>
                </li>
                <li>
                    <a href="images/photos/lineup.jpg" title="我的图片4"><img src="images/photos/thumbnial_lineup.jpg" alt="漂亮的图片"/></a>
                </li>
            </ul>
        </div>

 

3、修改webdesign.css样式

追加如下样式:#imagegallery li{

                      display:inline;      

                    }

 

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");
    }else{
        var text = "";
    }
    var description = document.getElementById("description");
    if(description.firstChild.nodeType == 3){
        description.firstChild.nodeValue = text;
    }
    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.length; i++){
        links[i].onclick = function(){
            return showPic(this);
        }
    }
}



addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

 

5、打开浏览器浏览,看到效果,photos页面ok啦!

二、学与思

1、li的样式设置为inline

#imagegallery li{

                      display:inline;      

                    }

块级元素变成行内元素,这样子所有的li就能水平显示。

2、nodeType==3为文本节点类型

description.firstChild.nodeType == 3

 

 

 

目录
相关文章
|
7天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
21 6
|
11天前
|
数据可视化 JavaScript API
使用D3.js进行数据可视化的探索与实践
【6月更文挑战第2天】本文探讨了D3.js在数据可视化中的应用,介绍了D3.js作为JavaScript库的特性,包括数据驱动、灵活性和兼容性。实践中,涉及数据准备、创建SVG容器、数据绑定与绘制、交互与动画以及样式美化。D3.js使开发人员能高效创建动态、交互式图表,适用于多平台和设备。未来,随着数据可视化技术进步,D3.js的应用前景广阔。
|
1天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
5 0
|
2天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
9 2
|
2天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
15 3
|
7天前
|
JavaScript 前端开发
一个基于HTML与JavaScript的Wizard演示
一个基于HTML与JavaScript的Wizard演示
7 0
|
7天前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
15 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
7天前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
12 1
|
7天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
12 0
|
7天前
|
移动开发 前端开发 JavaScript
[初学者来练]用html+css+javascript个人博客作业需求
【6月更文挑战第3天】该项目旨在通过HTML、CSS和JavaScript创建一个响应式个人博客网站,提升前端开发技术理解与实践能力。主要包括设计简洁页面布局、实现主页展示、文章列表、详情页及评论功能。技术要求使用HTML5/CSS3/JavaScript,可选前端框架,强调代码质量和可维护性。提交内容需包括完整网站、开发文档和测试过的代码。评分标准涉及设计、功能实现、技术应用和文档质量。
11 0