js操作图片

最新推荐文章于 2024-10-03 20:49:40 发布

sqcwfiu

最新推荐文章于 2024-10-03 20:49:40 发布

阅读量368

点赞数

分类专栏： js 文章标签： JavaScript BBS ViewUI

本文链接：https://blog.csdn.net/sqcwfiu/article/details/83300300

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>