JavaScript中图像处理技巧

开发 前端
这里向大家简单介绍一下JavaScript中有关图像的处理,主要包括读取图像的属性,动态加载图像和函数实现的图像替换等内容,相信对你的学习一定会有所帮助。

你知道JavaScript中如何对图像进行操作吗,这里和大家简单分享一下,希望通过本文的详细介绍你对JavaScript中图像的操作有明确的认识。

JavaScript图像

读取图像属性

  1. 1<imgsrcimgsrc="/”image1.jpg"name=”myImage”> 
  2. 2<ahrefahref=”#”  
  3. onClick=”window.alert(document.myImage.width)”> 
  4. Width</a> 

动态加载图像

  1. 1<scriptlanguagescriptlanguage=”JavaScript”> 
  2. 2myImage=newImage;  
  3. 3myImage.src=“Tellers1.jpg”;  
  4. 4</script> 

简单的图像替换

  1. 1<scriptlanguagescriptlanguage=”JavaScript”> 
  2. 2rollImage=newImage;  
  3. 3rollImage.src=“rollImage1.jpg”;  
  4. 4defaultImage=newImage;  
  5. 5defaultImage.src=“image1.jpg”;  
  6. 6</script> 
  7. 7<ahrefahref="/”myUrl" 
  8. onMouseOver=”document.myImage.src=rollImage.src;”  
  9. 8onMouseOut=”document.myImage.src=defaultImage.src;”> 
  10. 9<imgsrcimgsrc="/”image1.jpg" 
  11. name=”myImage”width=100height=100border=0> 

随机显示图像 

  1. 1<scriptlanguagescriptlanguage=”JavaScript”> 
  2. 2varimageList=newArray;3:imageList[0]=“image1.jpg”;  
  3. 3imageList[1]=“image2.jpg”;  
  4. 4imageList[2]=“image3.jpg”;  
  5. 5imageList[3]=“image4.jpg”;  
  6. 6varimageChoice=Math.floor(Math.random()*imageList.length);  
  7. 7document.write(‘<imgsrcimgsrc=”’+imageList[imageChoice]+‘“>’);  
  8. 8</script> 

函数实现的图像替换 

  1. 1<scriptlanguagescriptlanguage=”JavaScript”> 
  2. 2varsource=0;  
  3. 3varreplacement=1;  
  4. 4functioncreateRollOver(originalImage,replacementImage){   
  5. 5varimageArray=newArray;  
  6. 6imageArray[source]=newImage;  
  7. 7imageArray[source].src=originalImage;  
  8. 8imageArray[replacement]=newImage;  
  9. 9imageArray[replacement].src=replacementImage;  
  10. 10returnimageArray;  
  11. 11}  
  12. 12varrollImage1=createRollOver(“image1.jpg”,”rollImage1.jpg”);  
  13. 13</script> 
  14. 14<ahrefahref=”#”  
  15. onMouseOver=”document.myImage1.src=rollImage1[replacement].src;”  
  16. 15onMouseOut=”document.myImage1.src=rollImage1[source].src;”> 
  17. 16<imgsrcimgsrc="/”image1.jpg" 
  18. width=100name=”myImage1”border=0> 
  19. 17</a> 

创建幻灯片 

  1. 1<scriptlanguagescriptlanguage=”JavaScript”> 
  2. 2varimageList=newArray;  
  3. 3imageList[0]=newImage;  
  4. 4imageList[0].src=“image1.jpg”;  
  5. 5imageList[1]=newImage;  
  6. 6imageList[1].src=“image2.jpg”;  
  7. 7imageList[2]=newImage;  
  8. 8imageList[2].src=“image3.jpg”;  
  9. 9imageList[3]=newImage;  
  10. 10imageList[3].src=“image4.jpg”;  
  11. 11functionslideShow(imageNumber){   
  12. 12document.slideShow.src=imageList[imageNumber].src;  
  13. 13imageNumber+=1;  
  14. 14if(imageNumber<imageList.length){   
  15. 15window.setTimeout(“slideShow(“+imageNumber+“)”,3000);  
  16. 16}  
  17. 17}  
  18. 18</script> 
  19. 19</head> 
  20. 20<bodyonLoadbodyonLoad=”slideShow(0)”> 
  21. 21<imgsrcimgsrc="/”image1.jpg"width=100name=”slideShow”> 

随机广告图片 

  1. 1<scriptlanguagescriptlanguage=”JavaScript”> 
  2. 2varimageList=newArray;  
  3. 3imageList[0]=“image1.jpg”;  
  4. 4imageList[1]=“image2.jpg”;  
  5. 5imageList[2]=“image3.jpg”;  
  6. 6imageList[3]=“image4.jpg”;  
  7. 7varurlList=newArray;  
  8. 8urlList[0]=“http://some.host/”;  
  9. 9urlList[1]=“http://another.host/”;  
  10. 10urlList[2]=“http://somewhere.else/”;  
  11. 11urlList[3]=“http://right.here/”;  
  12. 12varimageChoice=Math.floor(Math.random()*imageList.length);  
  13. 13document.write(‘<ahrefahref=”’+urlList[imageChoice]+‘“> 
  14. <imgsrcimgsrc=”’+imageList[imageChoice]+‘“></a>’);  
  15. 14</script> 

【编辑推荐】

  1. 详细说明Javascript匿名函数技巧与文章
  2. 循环结构中JavaScript匿名函数用法实例解析
  3. 常用JavaScript方法和技巧
  4. JavaScript函数中arguments对象
  5. Javascript中CSS属性float特殊写法

 

责任编辑:佚名 来源: tech.ddvip.com
相关推荐

2010-03-03 13:12:56

Python图像处理

2023-10-16 07:55:15

JavaScript对象技巧

2013-04-22 13:57:15

Android图像特效

2020-07-28 08:14:30

JavaScript开发技术

2020-05-15 08:06:37

JavaScriptobject URL对象

2010-08-17 15:04:37

JavaScriptDOM ready

2020-05-09 11:15:12

JavaScript图像处理 开源

2020-05-12 11:35:53

JavaScript开源技术

2020-06-16 08:39:35

JavaScript图像处理库

2017-08-28 15:21:29

异步处理回调函数异步编程

2013-06-03 11:28:05

shell命令

2009-06-25 14:05:40

Java应用技巧

2023-07-24 07:11:43

2013-01-04 16:17:33

Android开发图像特效图像处理

2020-12-17 07:52:38

JavaScript

2018-07-12 15:40:23

前端JavaScripthtml

2011-03-21 12:41:41

JavaScript

2023-09-26 21:53:27

Java图像处理

2023-12-14 15:22:39

图像操作图像处理计算机视觉

2019-12-12 20:49:05

JavaScript语言运算符
点赞
收藏

51CTO技术栈公众号