一、
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display">Firework</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black of coffee">Coffee</a>
</li>
<li>
<a herf="images/rose.jpg" title="A red,red rose">Rose</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gift" alt="my image gallery" />
</body>
</html>
通过改变站位符src属性的值来调用图片。
例：
站位符<img id="placeholder" src="images/placeholder.gift" alt="my image gallery" />
假设whichpic为一个指向某个图片的<a>元素
var source=whichpic.getAttribut("herf")得到图片存储的相对路径。
var placeholder=document.getElementById("placeholder") 定义获得站位占位符的元素节点。
placeholder.setAttribute("src","source")将站位符中的图片换为source指向的图片。
二、事件处理：
1、onmouseover 当鼠标悬停时触发一个动作
2、onmouseout 当鼠标离开时触发一个动作
3、onclick 当鼠标点击时触发一个动作
当点击事件后"return false;"默认为没有点击。
三、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="utf-8">
<tittle>Shopping</tittle>
<style>
selector{property:value;}
p{color:yellow;font-family:"arial",sans-serif;
font-size: 1.2em}
.special{font-style:italic;}
h2.special{font-transform:uppercase;}
body{color:white;background:black;}
#purchases{border:1px solid white;background-color:#333;
color:#ccc;padding:1em;}
#purchases li{font-wight:bold;}
</style>
</head>
<body>
<h1>What to buy</h1>
<p tittle="a gentle reminder">Don't forget to buy thiss tuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Chinese</li>
<li class="sale important">Milk</li>
</ul>
</body>
</html>
1、childNodes 获取一个元素的所有子元素，以数组的形式表现。
例子：
var body_element=ducomemnt.getElementByTagName("body")[0]
body_element.childNodes
获取body 中所有的子元素
window.onload =sth
当页面加载完成时执行 sth 函数。
2、nodetype
元素节点的nodetype值为1.
属性节点的nodetype值为2.
文本节点的nodetype值为3.
function showpic(whichpic){
var source=whichpic.getAttribute("herf") //获取whichpic的herf定义为source
var placeholder=docunent.getElementById("placedholder") //获取占位符定义为placedholder
placeholder.setAttribute("src",source); //将用herf取代占位符的src
var text =whichpic.getAttribute("title"); //获取whichpic 的title属性
var description=document.getElementById("description") //获取图片下的文本
description.firstChild.nodeValue=text; //将图片下的文本的内容改为whichpic的title中的内容
}
分享到：
相关推荐
JavaScript 图片库是一种基于 JavaScript 技术实现的用于展示、管理、操作图片的工具或框架。在网页开发中，图片库通常提供丰富的功能，如图片预览、滑动展示、缩放、旋转、裁剪等，以提升用户体验并增强网站的视觉...
本篇文章将深入探讨JavaScript图片库的关键知识点。 首先，图片库的核心功能之一是图片加载。在网页中，图片加载可以通过`<img>`标签实现，但JavaScript图片库通常提供了更灵活的方法，例如异步加载、预加载策略等...
JavaScript 图片库是一种轻量级的前端解决方案，用于在网页上展示、管理和操作图像。它通常包含一组JavaScript函数和可能的CSS样式，用于创建动态、交互式的图片展示效果。在这个"javascript-图库"压缩包中，我们...
**Echo.js：一款高效实用的JavaScript延迟加载图片库** 在网页设计中，图片是不可或缺的元素，它们可以增强用户体验，但同时也可能导致页面加载速度变慢。为了优化网站性能，延迟加载（Lazy Loading）技术应运而生...
这时，可以考虑使用专门的JavaScript图片库，例如`imgViewer2`或`lightbox2`。这些库提供了丰富的选项和自定义功能，能够满足更多需求。 总结： JavaScript实现图片放大功能主要依赖于对DOM元素的操作和CSS变换。...
标题中的"360度图片全景展示js库"指的是使用JavaScript编写的库，专门用于创建这种互动式的全景图像展示。JavaScript是一种轻量级的脚本语言，广泛应用于浏览器端，用于增强网页的动态功能和交互性。这样的js库通常...
HTML5图片图像处理JS库是一种利用JavaScript在浏览器端进行图像操作的技术，它极大地扩展了Web开发者在客户端处理图像的能力，无需依赖服务器端的资源。基于HTML5的JS图片图像处理库，如AlloyPhoto，提供了丰富的...
标题中的“一个简单的JS图片浏览功能”指的是使用JavaScript实现的一种基本的图片查看器或图片轮播功能。在网页开发中，这种功能常用于创建在线相册、产品展示或其他需要动态展示图片的场景。JS（JavaScript）是一种...
JavaScript图片库通常包含了一系列用于加载、显示、编辑、转换和处理图像的函数和类。这个库可能包括读取图片文件、调整尺寸、旋转、裁剪、滤镜效果、颜色管理等功能。 标签“JavaScript”进一步确认了这个库的核心...
**标题详解：** "viewer.js图片预览插件" 是一个专门用于图片预览的JavaScript库，它提供了方便的功能，使用户能够在网页上快速、高效地预览图片。这个插件设计灵活，可以在不同的项目中独立使用，无需依赖其他大型...
JavaScript（简称JS）图片压缩是一种在前端或者后端使用JavaScript技术对图像文件进行优化，减小其文件大小的技术。这在网页开发中尤其重要，因为更小的图片文件可以提高网站加载速度，提升用户体验，同时也有助于...
这个"导出带有图片xlsx的js插件"就是专门为了解决在JavaScript环境中创建包含图片的Excel（xlsx）文件而设计的。 该插件的核心功能是允许开发者在生成的Excel文件中嵌入图像，这对于数据报告、数据分析或者用户...
在网页设计中，为了提升用户体验和视觉吸引力，经常会使用JavaScript来实现各种动态效果，其中“js漂亮图片选中效果”就是一个常见的应用场景。这种效果通常用于图片轮播、产品展示或者广告设计，它允许用户交互式地...
【标题】"js.rar_JSCreateMap.rar_js_js 图片_图片 javascript_老外js" 涉及的核心技术是JavaScript中的图片处理和动画效果，尤其是老外开发的一款名为JSCreateMap的库，它提供了类似Flash的动态图片展示功能。...
"js特效(大全),图片切换JS 图片放大JS"这个压缩包文件显然包含了用于创建动态图像展示的JavaScript代码示例，这对于我们理解JavaScript在网页中的应用至关重要。 首先，让我们深入了解一下“图片切换JS”。图片切换...
总结起来，"js读取图片分辨率demo"是一个使用JavaScript和`exif.js`库来读取并显示图片分辨率的实例，它展示了如何通过FileReader API读取文件，以及如何解析图片的EXIF信息来获取分辨率。这对于开发涉及图片处理的...
通常，我们会在服务器端处理图片生成缩略图，或者使用前端库如`canvas`来绘制缩略图。对于简单的应用场景，可以使用CSS的`object-fit`属性来实现图片的缩放效果： ```html ; height: auto; object-fit: cover;"> ``...
JavaScript应用实例-百度ocr图片文字识别.js
在网页设计中，展示图片的方式多种多样，但为了提供更好的用户体验，一种常用的技术是使用JavaScript（JS）来创建图片轻量级弹出显示效果，即所谓的"Lightbox"功能。Lightbox技术允许用户点击缩略图后，在当前页面上...
在标题"js转换图片到Excel里面"和描述中提到的任务，是利用JavaScript将硬盘上的图片读取并嵌入到Excel文档中。这种技术对于数据可视化、报告生成或批量处理图像与表格数据结合的场景非常有用。下面，我们将深入探讨...