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

Javascript
用Javascript实现锚点(Anchor)间平滑跳转
实现png图片和png背景透明（支持多浏览器）的方法
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
用DIV完美模拟createPopup 弹出窗口(修正版)，支持Firefox,ie,chrome
JavaScript 中级笔记 第一章
IE与Firefox在JavaScript上的7个不同写法小结
MooTools 1.2介绍
Mootools 1.2教程(2) DOM选择器
Mootools 1.2教程(3) 数组使用简介
在IE下获取object（ActiveX）的Param的代码
ExtJS 配置和表格控件使用
javascript 缓冲效果实现代码 推荐
html数组字符串拼接的最快方法
JavaScript 浮动定位提示效果实现代码
类似CSDN图片切换效果脚本
javascript 面向对象编程 function也是类
javascript 面向对象编程 聊聊对象的事
javascript 面向对象编程 function是方法(函数)
[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
jQuery slider Content(左右控制移动)

No. « 226 227 228 229 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 294 ::
收藏到网摘: 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>