JavaScript中图像处理技巧
创始人
2024-07-15 12:30:25
0

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

JavaScript图像

读取图像属性

  1. 1 
  2. 2
  3. onClick=”window.alert(document.myImage.width)”> 
  4. Width 

动态加载图像

  1. 1 
  2. 2myImage=newImage;  
  3. 3myImage.src=“Tellers1.jpg”;  

简单的图像替换

  1. 1 
  2. 2rollImage=newImage;  
  3. 3rollImage.src=“rollImage1.jpg”;  
  4. 4defaultImage=newImage;  
  5. 5defaultImage.src=“image1.jpg”;  
  6. 7
  7. ”onMouseOver=”document.myImage.src=rollImage.src;”  
  8. 8onMouseOut=”document.myImage.src=defaultImage.src;”> 
  9. 9
  10. ”name=”myImage”width=100height=100border=0> 

随机显示图像 

  1. 1 
  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(‘’);  

函数实现的图像替换 

  1. 1 
  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 
  14. 14
  15. onMouseOver=”document.myImage1.src=rollImage1[replacement].src;”  
  16. 15onMouseOut=”document.myImage1.src=rollImage1[source].src;”> 
  17. 16
  18. ”width=100name=”myImage1”border=0> 
  19. 17 

创建幻灯片 

  1. 1 
  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
  15. 15window.setTimeout(“slideShow(“+imageNumber+“)”,3000);  
  16. 16}  
  17. 17}  
  18. 18 
  19. 19 
  20. 20 
  21. 21 

随机广告图片 

  1. 1 
  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(‘ 
  14. ’);  
  15. 14 

【编辑推荐】

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

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...