js入门：建立一个图片库

最新推荐文章于 2023-11-27 07:00:00 发布
最新推荐文章于 2023-11-27 07:00:00 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： JavaScript HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishichengyan/article/details/77759324
版权
JavaScript 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
HTML
9 篇文章 0 订阅
订阅专栏
CSS
7 篇文章 0 订阅
订阅专栏

js入门小项目——实现一个非常简单的图片库。。。其实就是做一个可以切换图片的网页，先上代码：

1）html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Image Gallery</title>
		<script type="text/javascript" src="scripts/showPic.js"></script>
		<link rel="stylesheet" href="styles/layout.css" type="type/css" media="screen"/>
	</head>
	<body>
		<h1>Famous Paintings</h1>
		<ul>
			<li>
				<a href="images/snowstorm.jpg" οnclick="showPic(this);
				return false;" title="snow storm by Turner">
				Snowstorm</a>
			</li>
			<li>
				<a href="images/sunflowers.jpg" οnclick="showPic(this);
				return false;" title="sunflowers by van Gogh">
				Sunflowers</a>
			</li>
			<li>
				<a href="images/selfportrait.jpg" οnclick="showPic(this);
				return false;" title="double self portrait by Schiller">
				Selfportrait</a>
			</li>
		</ul>
		<img id="placeholder" src="images/placeholder.jpg"/>
		<p id="description">Choose an image.</p>
	</body>
</html>
2）css： 

body{
	font-family:"Helvetica","Arial",sans-serif;
	color:#333;
	background-color:#ccc;
	margin:1em 10%;
}
h1{
	color:#333;
	background-color:transparent;
}
a{
	color:#c60;
	background-color:transparent;
	font-weight:bold;
	text-decoration:none;
}
ul{
	padding:0;
}
li{
	float:left;
	padding:1em;
	list-style:none;
}
3）js： 

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

/*
function countBodyChildren(){
	var body_element=document.getElementsByTagName("body")[0];
	alert(body_element.childNodes.length);
}

window.οnlοad=countBodyChildren;
*/
效果（CSS似乎有点问题。。）：



lishichengyan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用php建立图库,教你搭建自己的图片库
weixin_39547392的博客
03-21 1550
确实如此。正常情况下，过去文章中的图片，超过60%都无法在国内正常显示。但是，事实上，这个网志的所有图片链接都是有效的，没有一个链接是坏的。无法显示只是因为被屏蔽了，只要你不在中国大陆，所有图片都能看到。最早的时候，我使用Flickr存放图片。但是2007年，Flickr被屏蔽了。后来，我改用Picasa存放图片。2009年，Picasa也被屏蔽了。我又改用Photobucket。2010年1月，...
13款JavaScript图像处理库，建议收藏备用
六六的小帅的博客
05-19 3505
JavaScript库
如何使用 php搭建一个自己的图片库？
2301_76418831的博客
03-31 614
在上面的示例代码中，首先获取上传文件的文件名和文件路径。接着，获取用户输入的图片描述。在上面的示例代码中，首先使用 MySQLi 扩展从数据库中检索所有图片信息，并按上传日期倒序排列。创建上传表单：在前端页面上创建一个表单，允许用户选择并上传图片文件。创建图片浏览页面：创建一个 PHP 页面，从数据库中检索所有图片，并将它们显示在页面上。注意，在实际应用中，您需要添加更多的功能，例如图片分类、搜索等。使用 PHP 来搭建自己的图片库，会比较酷，因为自己的平台，自己的数据，啥都是自己的，本来就很酷。
从0开始学习JavaScript--构建强大的JavaScript图片库
最新发布
晓晓的天空
11-27 741
在构建JavaScript图片库的过程中，深入探讨了多个关键方面，包括图片加载与展示、操作与效果、组件化、动画与交互、性能优化、兼容性以及安全性考虑。通过丰富的示例代码，不仅学会了基础的图片加载和展示技巧，还掌握了图片的操作、效果处理，甚至构建了一个简单的图片轮播组件。在动画与交互方面，实现了淡入效果、拖拽与缩放等交互操作，提升了用户体验。性能优化方面，介绍了惰性加载和WebP格式的使用，以提高网页加载速度。跨浏览器兼容性方面，涉及了浏览器前缀处理和兼容性检测，确保图片库在不同浏览器上正常运行。
用js制作的简易图片浏览
JS AMAZING
04-16 817
刚开始学习js，练习的编了一个简易图片浏览的程序： a:visited {color:red}                           var myImages=new Array("1.jpg","guang.jpg","tixue.jpg","iphone.jpg"); var i=0; function forward()
JavaScript（JS）制作网页--点击图片换背景
Dreamer
11-17 2069
JS制作网页–点击图片换背景 网页中有四个图片，点击不同的图片，更换相对应的背景。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title>
workshop:不到一个小时的Django入门讲习班
04-30
【标题】"workshop:不到一个小时的Django入门讲习班" 这个工作坊专注于快速入门Django，一个流行的Python Web框架。Django以其“简洁、优雅、实用”的设计理念，广泛应用于构建高效、安全的Web应用。在一个小时内，...
ReactStarter:第一个React项目
05-29
这个“ReactStarter”项目是初学者踏入React开发世界的入门教程，旨在帮助开发者快速搭建一个基本的React应用。 在React项目中，我们通常会遵循以下步骤： 1. **环境配置**：首先，你需要安装Node.js和npm（Node包...
first-steps:一个供我学习开始Web开发的仓库
03-10
【标题】"first-steps:一个供我学习开始Web开发的仓库" 涉及的知识点 这个标题表明，这是一个针对初学者的Web开发资源库，可能是通过GitHub或其他版本控制系统托管的一个项目。"first-steps"暗示了它是一个入门级...
CodoACodo:Codo 一个 Codo 全栈 Java
05-31
CodoACodo 是一个专为学习全栈 Java 开发而设计的项目，它涵盖了从后端开发到前端展示的完整流程，旨在帮助开发者全面理解Java技术栈以及与其紧密相关的HTML基础知识。这个项目不仅适合初学者入门，也对有一定经验的...
Html5图片图像处理JS库
05-18
基于html5的JS图片图像处理库 简单快捷的API 多图层操作 与PS对应的17种图层混合模式 多种基本滤镜处理效果 多种组合风格效果
javascript图片库
03-29
NULL 博文链接：https://fuying88958.iteye.com/blog/1290020
JS实现HTML5 Canvas图像数据和图片的互相转化
08-23
这篇文章了我将介绍一下如何将一张图片拷贝到canvas里，以及反过来，如何将画布内容保存成图片格式。 使用JavaScript将图片拷贝进画布 要想将图片放入画布里，我们使用canvas元素的drawImage方法： // Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; } 这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。 用JavaScript将画布保持成图片格式 如果你的画布上的作品已经完成，你可以用下面简单的方法将canvas数据转换成图片格式： // Conver[......] 阅读全文>>
Html+Css+Javascript从入门到精通
08-31
通过阅读“Html+Css+Javascript从入门到精通.pdf”，你将逐步建立起完整的网页开发知识体系，为成为一名合格的前端开发者打下坚实基础。在学习过程中，不断练习和尝试新的技术，将助你在网页开发领域游刃有余。
JavaScript图片库案例
gergerfrgegregfd的博客
06-26 465
JavaScript DOM编程艺术 第4章，JavaScript图片库案例。
图解JavaScript图片库建立流程
m0_49687054的博客
08-29 400
目录 前言 一、基本框架 二、拓展：在本界面查看图片 三、拓展：添加描述文字 前言 最近开始看《Javascript DOM编程技术》自学，其中有一个图片库建立的案例，就把它做成了流程图帮助理解。 一、基本框架 首先，要建立一个网页框架。网页实质上是一个html文档，文档可以用树状图来表达，这就是DOM（Document Object Model 即文档对象模型）。 在此例中，模型图如下， 代码如下： <!DOCTYPE html&...
10大Js图像处理库
高先生的猫
06-30 5297
介绍 对于很多人来说，使用Javascript来处理图像不是一件非常简单的事情，幸运的是我们可以借助第三方的库来实现我们想要的功能，本篇文章就介绍一有哪些Javascript图片处理库可供我们选择和使用!以下排名不分先后 1. Pica 此插件可减小大图像的上传大小，从而节省上传时间。它可以在浏览器中调整图像大小，而不会出现像素化现象并且相当快。它会从web-workers, web assembly, createImageBitmap and 纯JS自动选择优秀的可用技术。 减小大图像...
数字图像处理(7)：爬虫建立数据库并实现图像检索
ZhaoDongyu_AK47的博客
06-26 2704
文章目录爬虫建立数据库图像检索1、使用平台及语言2、图像检索操作流程2.1点击 选择检索图像按钮2.2选择数据库路径2.3点击直方图检索2.4人脸检测与识别（待添加）3.此应用程序用途上周作业遗留问题：彩色直方图检索遇到的问题及收获 本周的实验我与llk同学合作完成，他负责爬虫建立数据库，我负责进行图像检索。最终实现成果为： llk同学通过爬虫对某个关键词爬百度图片网页，对其中的图片进行保存，转换为.bmp格式文件，图像大小调整为200*150像素，以此建立数据库。 我使用MFC设计应用程序，在其中加入彩色
javascript基础入门.ppt
11-12
例如，一个简单的脚本可能包含函数定义和注释，如`<script>`标签内的`function HELLO() { ... }`，以及使用`//`或`/* ... */`进行单行或多行注释。 基础入门阶段，你还会学习如何在HTML页面上放置脚本，比如在`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值