蓝派网(www.lan27.com)-精选网络资源,分享和交流! 文章首页站内搜索在线手册广告代码酷站欣赏万年历
您现在的位置: 蓝派网 >> 文章中心 >> 网页制作 >> JavaScript >> 正文

有关图片相关的收集

作者:佚名    文章来源:网络    更新时间:2008-10-26 22:41:50

1.掉链接图片的替代图片,如果图片路径无效,将显示出一张默认的图片

HTML代码

<img src="no.jpg" onerror="this.src='http://www.lan27.com/images/logo.gif'">

2.自动缩小大图
经常看到一些图片很大,上传后显示会撑满屏幕
下面的例子通过检测
if(this.width>screen.width-350)then(this.width=screen.width-350)
如果该图片的宽度大于“屏幕宽度-350”,则让该图就显示“屏幕宽度-350”这么大小。

HTML代码

原图<br>
<img src="http://www.lan27.com/images/mi.jpg"><br>
设定大小的图<br>
<img src="http://www.lan27.com/images/mi.jpg" onload="javascript:if(this.width>screen.width-350)then(this.width=screen.width-350)">

3.随机显示图片

HTML代码

<script language=vbs>
Randomize
i=Int((80 * Rnd) + 1)
document.write"<img src='http://www.lan27.com/images/face"&i&".gif'>"
</script>

4.图片轮流切换

HTML代码

<SCRIPT LANGUAGE="JavaScript" defer>

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = "http://www.lan27.com/blog/smile/face1.gif";
Pic[1] = "http://www.lan27.com/blog/smile/face2.gif";
Pic[2] = "http://www.lan27.com/blog/smile/face3.gif";
Pic[3] = "http://www.lan27.com/blog/smile/face4.gif";
Pic[4] = "http://www.lan27.com/blog/smile/face5.gif";

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<body onload="runSlideShow()">
<img id="SlideShow"/>


发表评论】【打印此文】【关闭窗口】【点击数:
★好玩的休闲小游戏★