当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript入门·图片对象(无刷新变换图片)\滚动图像

Javascript
我也种棵OO树JXTree[js+css+xml]
新浪中用来显示flash的函数
JXTree对象，读取外部xml文件数据，生成树的函数
用js来格式化字符串示例模仿css
js prototype 格式化数字 By shawl.qiu
新浪刚打开页面出来的全屏广告代码
记录几个javascript有关的小细节
Some tips of wmi scripting in jscript (1)
JavaScript Try...Catch 声明的 使用方法
JS版获取字符串真实长度和取固定长度的字符串函数
Javascript中的数学函数
ArrayList类（增强版）
javascript中巧用“闭包”实现程序的暂停执行功能
javascript判断单选框或复选框是否选中方法集锦
FireFox的getYear的注意事项
JavaScript For...In 使用方法
JavaScript Switch 声明
JavaScript If...Else 声明
JavaScript For 循环
JavaScript While 循环 教程

No. « 59 60 61 62 »

技术文章搜索

关键字

Javascript 中的 javascript入门·图片对象(无刷新变换图片)\滚动图像

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 415 ::
收藏到网摘: n/a

复制代码 代码如下:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片对象</title>
<script language="javascript">
<!--
//书上说这样可以预缓存图片对象，实际是骗人的了。下面是我 特意整的特别大的图片
img1=new Image(300,400)
img1.src="http://www.azsz.com/test/view/1.jpg"
img2=new Image(300,400)
img2.src="http://www.azsz.com/test/view/2.jpg"
img3=new Image(300,400)
img3.src="http://www.azsz.com/test/view/3.jpg"
img4=new Image(300,400)
img4.src="http://www.azsz.com/test/view/4.jpg"
function img(s){//根据下拉菜单传来的值，也就是被选中项调用函数
im=document.getElementById("select1").options[s].value;//得到被选中项的值
document.getElementById("img").src=eval(im+".src")//使用eval()函数引用对象的src值并赋给页面上的图片
}
//下面是DW自动生成的，所以有点不好看，懒得看了，麻烦啊，下面有我自己参考书上写的
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body onload="MM_preloadImages('img/3.jpg','img/2.jpg','img/4.jpg')">
<p><strong>演示一：无刷新变换图片（有点歪）</strong></p>
<p>
<select name="select1" onchange="img(this.options.selectedIndex)">
<option value="img1">1</option>
<option value="img2">2</option>
<option value="img3">3</option>
<option value="img4">4</option>
</select>
<input type="image" name="img" src="img/7.jpg" />
</p>
<p><strong>演示二：鼠标触发图片变换（书面名称好像叫图像滚动）</strong></p>
<p>
<script language="javascript">
//先建立两个数组，一组是on 状态的，一组是off状态的
//数组使用的是字符串作索引，一来方便识别，二来在代码运行中不会冲突
offimg=new Array()
offimg["play"]=new Image(60,50)
offimg["stop"]=new Image(60,50)
offimg["pause"]=new Image(60,50)
offimg["rewind"]=new Image(66,55)
//赋值
offimg["play"].src="img/1.jpg"
offimg["stop"].src="img/2.jpg"
offimg["pause"].src="img/3.jpg"
offimg["rewind"].src="img/4.jpg"
//第二个数组
onimg=new Array()
onimg["play"]=new Image(60,50)
onimg["stop"]=new Image(60,50)
onimg["pause"]=new Image(60,50)
onimg["rewind"]=new Image(66,55)
//赋值
onimg["play"].src="img/5.jpg"
onimg["stop"].src="img/6.jpg"
onimg["pause"].src="img/7.jpg"
onimg["rewind"].src="img/1.jpg"
function on(imgname){
if(document.images){//判断浏览器是否能够处理图片对象
document.images[imgname].src=onimg[imgname].src//将对应的图片对象的src值赋给图片
}
}
function off(imgname){
if(document.images){//判断浏览器是否能够处理图片对象
document.images[imgname].src=offimg[imgname].src//将对应的图片对象的src值赋给图片
}
}
function setmsg(msg){//改变状态栏提示
window.status=msg;
return true;
}
</script>
<table width="591" border="1">
<tr>
<td width="169"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://thcjp.cnblogs.com" target="_top" onclick="MM_nbGroup('down','group1','Blogs','img/3.jpg',1)" onmouseover="MM_nbGroup('over','Blogs','img/2.jpg','img/4.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="img/1.jpg" alt="田轰穿博客" name="Blogs" width="80" height="120" border="0" id="Blogs" onload="" /></a></td>
</tr>
</table>
<p><a href="http://thcjp.cnblogs.com">上面是DW做的<br />
是预载入图片</a></p></td>
<td width="406">
<a href="http://thcjp.cnblogs.com"><img src="img/1.jpg" width="80" height="120" border="0" name="play" onMouseOver="on('play');return setmsg('我的教程博客 --> http://thcjp.cnblogs.com')" onmouseout="off('play');return setmsg('');" /></a>
<a href="http://www.cnblogs.com/thcjp/category/65304.html"><img src="img/2.jpg" width="80" height="120" border="0" name="stop" onmouseover="on('stop');return setmsg('天轰穿的博客之js入门系列教程--> http://www.cnblogs.com/thcjp/category/65304.html')" onmouseout="off('stop');return setmsg('')"/></a>
<a href="http://www.cnblogs.com/thcjp/category/59325.html"><img src="img/3.jpg" width="80" height="120" border="0" name="pause" onmouseover="on('pause');return setmsg('VS2005控件系列教程 http://www.cnblogs.com/thcjp/category/59325.html')" onmouseout="off('pause');return setmsg('')"/></a>
<a href="http://thcjp.cnblogs.com"><img src="img/4.jpg" width="80" height="120" border="0" name="rewind" onmouseover="on('rewind');return setmsg('ajax系列视频教程 --> http://thcjp.cnblogs.com')" onmouseout="off('rewind');return setmsg('');" /></a></td>
</tr>
</table>
</body>
</html>