1 读取图像属性
<img src="image1.jpg" name="myImage">
<a href="#" onClick="window.alert(document.myImage.width)">Width</a>
2 动态加载图像
<script language="JavaScript">
myImage = new Image;
myImage.src = "Tellers1.jpg";
</script>
3 简单的图像替换
<script language="JavaScript">
rollImage = new Image;
rollImage.src = "rollImage1.jpg";
defaultImage = new Image;
defaultImage.src = "image1.jpg";
</script>
<a href="myUrl" onMouseOver="document.myImage.src = rollImage.src;"onMouseOut="document.myImage.src = defaultImage.src;">
<img src="image1.jpg" name="myImage" width=100 height=100 border=0>
</a>
4 随机显示图像
<script language="JavaScript">
var imageList = new Array;
imageList[0] = "image1.jpg";
imageList[1] = "image2.jpg";
imageList[2] = "image3.jpg";
imageList[3] = "image4.jpg";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="’ + imageList[imageChoice] + '">');
</script>
5 函数实现的图像替换
<script language="JavaScript">
var source = 0;
var replacement = 1;
function createRollOver(originalImage,replacementImage) {
var imageArray = new Array;
imageArray[source] = new Image;
imageArray[source].src = originalImage;
imageArray[replacement] = new Image;
imageArray[replacement].src = replacementImage;return imageArray;
}
var rollImage1 = createRollOver("image1.jpg","rollImage1.jpg");
</script>
<a href="#" onMouseOver="document.myImage1.src = rollImage1[replacement].src;"onMouseOut="document.myImage1.src = rollImage1[source].src;">
<img src="image1.jpg" width=100 name="myImage1" border=0>
</a>
6 创建幻灯片
<head>
<script language="JavaScript">
var imageList = new Array;
imageList[0] = new Image;
imageList[0].src = "image1.jpg";
imageList[1] = new Image;imageList[1].src = "image2.jpg";
imageList[2] = new Image;imageList[2].src = "image3.jpg";
imageList[3] = new Image;imageList[3].src = "image4.jpg";
function slideShow(imageNumber) {
document.slideShow.src = imageList[imageNumber].src;
imageNumber += 1;if (imageNumber < imageList.length) {window.setTimeout("slideShow(" + imageNumber + ")",3000);}
}
</script>
</head><body onLoad="slideShow(0)"><img src="image1.jpg" width=100 name="slideShow">
7 随机广告图片
<script language="JavaScript">
var imageList = new Array;
imageList[0] = "image1.jpg";
imageList[1] = "image2.jpg";
imageList[2] = "image3.jpg";
imageList[3] = "image4.jpg";
var urlList = new Array;
urlList[0] = "http://some.host/";
urlList[1] = "http://another.host/";
urlList[2] = "http://somewhere.else/";
urlList[3] = "http://right.here/";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<a href="’ + urlList[imageChoice] + '"><img src="’ + imageList[imageChoice] + '"></a>');
</script>
<script language=javascript>
var im=new Image()
im.src="http://bbs.51js.com/images/51js.gif" alert(im.fileSize);
</script>
<img src="http://bbs.51js.com/images/default/newtopic.gif" name="img1">
<script> setTimeout("img1.src=im.src",5000);//你不会看到图片下载的过程 </script>
分享到：
相关推荐
本压缩包“js操作图片特效.zip”包含了几个关键的图片处理效果，如图片淡入淡出、翻转、模糊以及水印效果。下面将详细讲解这些知识点。 **图片淡入淡出效果** 图片淡入淡出是通过调整图片的透明度来实现的。在...
总的来说，JavaScript提供了丰富的功能来操作图片，包括等比缩放和旋转。通过理解基础原理并结合DOM操作，我们可以创建出具有动态效果和交互性的图片应用。在实际项目中，还可以结合现代浏览器的CSS3特性，提高性能...
博文链接：https://dreamit.iteye.com/blog/231712
在网页设计中，为了提升用户体验和视觉吸引力，经常会使用JavaScript来实现各种动态效果，其中“js漂亮图片选中效果”就是一个常见的应用场景。这种效果通常用于图片轮播、产品展示或者广告设计，它允许用户交互式地...
JavaScript 广告图片轮播（JS）是一种常见的网页动态效果，用于展示多个广告图片并自动进行切换，以吸引用户注意力并提升用户体验。这种技术在网站设计中被广泛应用，特别是电商平台和企业官网，如淘宝商城。以下是...
标题中的“一个简单的JS图片浏览功能”指的是使用JavaScript实现的一种基本的图片查看器或图片轮播功能。在网页开发中，这种功能常用于创建在线相册、产品展示或其他需要动态展示图片的场景。JS（JavaScript）是一种...
总结来说，利用JavaScript实现点击图片放大功能主要涉及事件监听、DOM操作和CSS样式调整。而生成缩略图则可以通过服务器端处理、前端`canvas`绘制或CSS样式控制来实现。在实际开发中，根据项目需求和性能考虑，可以...
- DOM操作：JavaScript通过Document Object Model (DOM)来操作HTML元素，例如获取图片元素、设置样式、添加事件监听器等，以实现图片的切换。 - 时间间隔控制：通过`setInterval`或`setTimeout`函数设置图片切换的...
在JavaScript（JS）中实现图片切换功能是一项常见的前端任务，主要应用于网站的幻灯片、轮播图等组件。这个功能通常需要结合HTML结构、CSS样式以及JavaScript代码来完成。以下是一个详细的步骤介绍： 首先，我们...
"通过调用 JS 打印图片信息"这个主题就是针对这一需求展开的。本文将深入探讨如何利用 JavaScript 实现这一功能，特别是在解决谷歌浏览器首次打印时图片不显示及去除IE浏览器页眉页脚的问题。 首先，我们需要理解为...
在`<body>`部分，HTML可能会包含图片元素或者特殊的容器元素，这些元素会被JavaScript操作来实现图片的展示和切换。 `css`目录下的文件是CSS样式表，它们用于定义图片播放器的外观，包括布局、颜色、字体、过渡动画...
标签“js图片放大 js 图片 放大”表明，这个主题不仅涉及JavaScript操作图片，还可能包括其他与图片处理相关的技术，如图片懒加载、图片裁剪、预加载等。虽然这些不在标题和描述中明确指出，但都是JavaScript在处理...
总结来说，动态设置和获取图片热区坐标是通过JavaScript操作HTML图像映射和处理鼠标事件来实现的。理解DOM操作、事件监听以及坐标转换是关键。同时，为了保证广泛的浏览器兼容性，开发者需要考虑对旧版浏览器的适配...
在IT行业中，JavaScript（简称JS）是一种广泛使用的前端编程语言，它不仅限于网页交互，还可以处理各种数据格式，包括创建和操作Excel文件。在标题"js转换图片到Excel里面"和描述中提到的任务，是利用JavaScript将...
2. **js鼠标指上去图片变清晰**：这种效果利用了CSS3的`filter`属性和JavaScript事件监听器，当鼠标悬浮在图片上时，应用一个模糊滤镜，移开时则恢复原状。JavaScript可以用来控制滤镜的开关和过渡动画，提供平滑的...
6. 图片滤镜与特效：JavaScript可以操作图片像素，实现各种滤镜效果，如黑白、模糊、饱和度调整等。这通常结合Canvas元素实现，将图片数据转换为像素数组，应用算法后再绘制回Canvas。 7. 图片响应式：在响应式设计...
在网页开发中，JavaScript（JS）和jQuery是两种非常重要的技术，它们被广泛用于实现动态交互效果，特别是在处理图片操作时。本篇文章将详细介绍如何利用JS和jQuery来实现对网页中图片的各种操作，包括移动、放大、...
这个技术利用JavaScript（JS）语言，通过编程方式实现图片的平滑过渡，让图片在切换时产生渐变效果，而非简单地立即替换，从而达到更优雅的视觉体验。 首先，我们来理解“图片渐变切换”的概念。在网页上，图片的...
总之，这个“图片变形扭曲脚本”展示了JavaScript在图像处理领域的强大能力，通过DOM操作、坐标变换和矩阵运算，可以实现各种创新的视觉效果。学习和理解这个脚本，不仅可以提升JavaScript编程技巧，还能增强对网页...