基于Javascript的简单图片管理

（一）标记

今天我要做一个小图片浏览的网页。第一项工作室为这些图片创建一个链接清单。因为我没打算让这些图片按照特定顺序排列，所以将使用一个无序清单元素（ul）
下面是我的清单标记

<h1>这是一个图片管理库</h1><ul><li><a href="img/103760-106.jpg" title="图片的简介1" >图片1</a></li><li><a href="img/247336-106.jpg" title="图片的简介2" >图片2</a></li><li><a href="img/248906-106.jpg" title="图片的简介3" >图片3</a></li><li><a href="img/248910-106.jpg" title="图片的简介4" >图片4</a></li></ul>

这是一个相当令人满意的网页，但是它的默认行为还不太理想。下面是我希望改进的几个地方。
1.当点击某个链接时，我希望能留在这个页面而不是转到另一个页面
2.当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单！
那么我们需要做什么呢？首先要拦截这个网页的默认行为，其次在浏览器上为图片预留一个浏览区域，所以我们要解决图片“占位符”的问题！

<img src="img/103760-106.jpg" id="placeholder" alt="图片1">

我对这个图片进行了id属性设置，下面是我网页的样式！
（二）javascript的工作

首先需要给函数起一个好名字！它应该能描述这个函数的用途，还要简明扼要。我决定把这个函数命名为showPic（在这里要注意哦！一般来说我们在创建函数时候对函数进行驼峰式命名也就是字母存在大小写，而对于变量的命名我们则采用下划线_
例如：show_pic。
这样可以让我们一眼看出到底哪些是变量哪些是函数名）

function showPic(whichpic)

whichpic代表一个元素节点！具体的说，那是一个指向某个图片的<a>元素。我需要分解出图片的文件路径，这可以通过whichpic元素上调用getAttribute得到，只要把“href”作为参数传递给getAttribute就行了

我们把这个路径存入变量source

    var source = whichpic.getAttribute("href");

接下来，还要获取“占位符”图片，

    var placeholder = document.getElementById("placeholder");

现在已经生命了2个变量

source与placeholder。
它们让脚本简明易读。我们通过设置变量的属性，将a标签的href属性给予给img的src

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

（三）应用这个javascript函数

<h1>这是一个图片管理库</h1><ul><li><a href="img/103760-106.jpg" title="图片的简介1" onclick="showPic(this);">图片1</a></li><li><a href="img/247336-106.jpg" title="图片的简介2" onclick="showPic(this);">图片2</a></li><li><a href="img/248906-106.jpg" title="图片的简介3" onclick="showPic(this);">图片3</a></li><li><a href="img/248910-106.jpg" title="图片的简介4" onclick="showPic(this);">图片4</a></li></ul>

通过点击事件实现但是此时我们还不能防止a标签的跳转！我们需要加上return
false！

<h1>这是一个图片管理库</h1><ul><li><a href="img/103760-106.jpg" title="图片的简介1" onclick="showPic(this);return false;">图片1</a></li><li><a href="img/247336-106.jpg" title="图片的简介2" onclick="showPic(this);return false;">图片2</a></li><li><a href="img/248906-106.jpg" title="图片的简介3" onclick="showPic(this);return false;">图片3</a></li><li><a href="img/248910-106.jpg" title="图片的简介4" onclick="showPic(this);return false;">图片4</a></li></ul>

这样就可以防止a的跳转了！

同理，我们还可以给图片添加简介，通过获取a标签的title属性！

    var title = whichpic.getAttribute("title");var description = document.getElementById("description");description.firstChild.nodeValue = title;

最终获取了简介最终代码如下：

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基于javascript的图片管理库</title><style type="text/css">img{width: 400px;height: 300px;}</style>
</head>
<body><h1>这是一个图片管理库</h1><ul><li><a href="img/103760-106.jpg" title="图片的简介1" onclick="showPic(this);return false;">图片1</a></li><li><a href="img/247336-106.jpg" title="图片的简介2" onclick="showPic(this);return false;">图片2</a></li><li><a href="img/248906-106.jpg" title="图片的简介3" onclick="showPic(this);return false;">图片3</a></li><li><a href="img/248910-106.jpg" title="图片的简介4" onclick="showPic(this);return false;">图片4</a></li></ul><img src="img/103760-106.jpg" id="placeholder" alt="图片1"><p id="description">choose an image</p><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/img.js"></script>
</body>
</html>

js代码如下：

//
function showPic(whichpic) {var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src",source);var title = whichpic.getAttribute("title");var description = document.getElementById("description");description.firstChild.nodeValue = title;
};

还有jquery的实现版本：

// jquery实现
$(document).ready(function() {$("a").click(function() {var source = $(this).attr("href");$("img").attr("src", source);return false;});
});

基于Javascript的简单图片管理相关推荐

海图（基于http服务器的图片管理工具）
有时需要在网页上上传本地图片,这个基于http服务器的图片管理工具就实现了对上传图片.查看所有图片信息.查看指定图片信息.查看指定图片内容.删除图片的功能. 整个海图项目分为两个模块:数据存储模块,服 ...
基于bootstrap实现简单用户管理功能
基于bootstrap实现简单用户管理功能,包括增删改以及列表分页展示功能. 1.web.xml配置servlet映射: <servlet><servlet-name>User ...
随机循环抽奖小程序_c语言,基于JavaScript实现简单的随机抽奖小程序
对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译 ...
基于pytorch的简单图片分类问题实现
pytorch中基于简单图片分类问题的实现大致可以分为以下几个步骤: 1.建立处理图片的神经网络,提前设置好损失函数(图片分类问题一般使用交叉熵损失函数),以及优化器. 2.在每一个学习的步骤中,将训 ...
xml+javascript实现简单图片轮换
最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东. xml文件:test.xml 1<?xml version=" ...
JavaScript实现简单图片滚动 --9张图告诉你，C罗欲哭无泪
源码下载:http://download.csdn.net/detail/u011043843/7510425 昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完 ...
日历html代码脚本之家,基于javascript编写简单日历
一.表格行数问题既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因 ...
html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡先来看看页面效果吧: 点击抽取 ...
html 简单机器人对话页面,基于Javascript实现的简单聊天机器人
Botui是一款简单的js聊天机器人框架.Botui基于Javascript通过简单配置,就可以制作出一个功能简单的聊天机器人,非常神奇. var botui = new BotUI('botui-a ...

基于Javascript的简单图片管理

基于Javascript的简单图片管理相关推荐

最新文章

热门文章