JavaScript图像

javascript

36 读取图像属性
1 <img src="”image1.jpg"” name=”myImage”>
2 <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
37 动态加载图像
1<script language=”JavaScript”>
2 myImage = new Image;
3 myImage.src = “Tellers1.jpg”;
4</script>
38 简单的图像替换
 1<script language=”JavaScript”>
 2 rollImage = new Image;
 3 rollImage.src = “rollImage1.jpg”;
 4 defaultImage = new Image;
 5 defaultImage.src = “image1.jpg”;
 6</script>
 7 <a href="/”myUrl"” onMouseOver=”document.myImage.src = rollImage.src;”
 8 onMouseOut=”document.myImage.src = defaultImage.src;”>
 9 <img src="”image1.jpg"” name=”myImage” width=100 height=100 border=0> 10
39 随机显示图像
 1<script language=”JavaScript”>
 2 var imageList = new Array;
 3 imageList[0] = “image1.jpg”;
 4 imageList[1] = “image2.jpg”;
 5 imageList[2] = “image3.jpg”;
 6 imageList[3] = “image4.jpg”;
 7 var imageChoice = Math.floor(Math.random() * imageList.length);
 8 document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
 9</script>
40 函数实现的图像替换
 1<script language=”JavaScript”>
 2  var source = 0;
 3  var replacement = 1;
 4  function createRollOver(originalImage,replacementImage) {
 5 var imageArray = new Array;
 6 imageArray[source] = new Image;
 7 imageArray[source].src = originalImage;
 8 imageArray[replacement] = new Image;
 9 imageArray[replacement].src = replacementImage;
10 return imageArray;
11 }
12 var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);
13</script>
14 <a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15 onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16 <img src="”image1.jpg"” width=100 name=”myImage1” border=0>
17 </a>
41 创建幻灯片
 1
 2<script language=”JavaScript”>
 3 var imageList = new Array;
 4 imageList[0] = new Image;
 5 imageList[0].src = “image1.jpg”;
 6 imageList[1] = new Image;
 7 imageList[1].src = “image2.jpg”;
 8 imageList[2] = new Image;
 9 imageList[2].src = “image3.jpg”;
10 imageList[3] = new Image;
11 imageList[3].src = “image4.jpg”;
12 function slideShow(imageNumber) {
13 document.slideShow.src = imageList[imageNumber].src;
14 imageNumber += 1;
15 if (imageNumber < imageList.length) {
16 window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
17 }
18 }
19</script>
20</head>
21<body onLoad=”slideShow(0)”>
22 <img src="”image1.jpg"” width=100 name=”slideShow”>
23
42 随机广告图片
 1<script language=”JavaScript”>
 2 var imageList = new Array;
 3 imageList[0] = “image1.jpg”;
 4 imageList[1] = “image2.jpg”;
 5 imageList[2] = “image3.jpg”;
 6 imageList[3] = “image4.jpg”;
 7 var urlList = new Array;
 8 urlList[0] = “http://www.xrss.cn”;
 9 urlList[1] = “http://www.pclala.com”;
10 urlList[2] = “http://www.flashbase.cn/”;
11 urlList[3] = “http://www.xrss.cn/123/”;
12 var imageChoice = Math.floor(Math.random() * imageList.length);
13 document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14</script> 

时间: 2024-08-30 13:42:23

JavaScript图像的相关文章

JavaScript 图像动画的小demo_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>图形动画</

Javascript图像处理

思路 HTML5的canvas提供了getImageData接口来获取canvas中的数据,所以我们能够先用drawImage接口将图片画在 canvas上然后再通过getImageData得到图片数据矩阵. canvas的浏览器支持情况,请参见: http://html5test.com/compare/feature/canvas-context.html 需要注意,虽然IE9开始支持了canvas接口,但是 其getImageData获取的数据并不是以标准的TypedArray方式存储的,

31款轻量高效的开源 JavaScript 插件和库

31款轻量高效的开源 JavaScript 插件和库 目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有用,而且不会影响网站的性能.本文,就为大家整理了以来30多款轻量级Javascript插件和库的列表,这些工具服务于特定的目标,并且它们能够非常有效和高效地实现目标. 不管你想创建一个图片库.一个滑动效果,个性化菜单还是其他接口元素,你都可以用这

ECHO.js 纯javascript轻量级延迟加载的实例代码_javascript技巧

ECHO.js 纯javascript轻量级延迟加载的实例代码 演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js</title> <style> .demo img { width: 736px; height: 490px;

javascript转换静态图片,增加粒子动画效果_javascript技巧

使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib <!DOCTYPE html> <html> <head> <title>particle image</title> <meta charset="utf-8" /> <style> #logo { margin-left:20px; margin-top:20px; width:160px; hei

ASP.NET服务器控件PleaseWaitButton

asp.net|服务器|控件 Introduction 在web application的表单提交过程中显示"please wait"信息或者是gif动画图片通常是很有用的,特别是提交过程比较久的情况.我最近开发了一个调查提交程序,在程序里内部用户通过一个网页上传excel电子表格.程序将上传的电子表格数据插入到数据库中.这个过程只需要几秒钟,但即便是几秒钟,在网页是看来却是非常明显的等待过程.在程序测试的时候,一些用户重复地点击上传按钮.因此,提供一个视觉的信息来告诉人们上传正在进行

纯JS实现旋转图片3D展示效果_javascript技巧

CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type

JS实现3D图片旋转展示效果代码_javascript技巧

本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

JS实现图片平面旋转的方法_javascript技巧

本文实例讲述了JS实现图片平面旋转的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&