编程 Javascript

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

Posted in Javascript onOctober 01, 2007

<%@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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

CSS JavaScript 实现菜单功能改进版

Dec 09 Javascript

解决WordPress使用CDN后博文无法评论的错误

Dec 15 Javascript

Angular实现form自动布局

Jan 28 Javascript

AngularJS基础 ng-cut 指令介绍及简单示例

Aug 01 Javascript

javascript实现QQ空间相册展示源码

Dec 12 Javascript

解决vue页面刷新或者后退参数丢失的问题

Mar 13 Javascript

javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】

Aug 01 Javascript

Vuex 使用及简单实例(计数器)

Aug 29 Javascript

js实现指定时间倒计时效果

Aug 26 Javascript

js判断非127开头的IP地址的实例代码

Jan 05 Javascript

详解vue高级特性

Jun 09 Javascript

解决nuxt页面中mounted、created、watch执行两遍的问题

Nov 05 Javascript

javascript入门·对象属性方法大总结

Oct 01 #Javascript

JS创建优美的页面滑动块效果 - Glider.js

Sep 27 #Javascript

[HTML/CSS/Javascript]WWTJS

Sep 25 #Javascript

奇妙的js

Sep 24 #Javascript

让getElementsByName适应IE和firefox的方法

Sep 24 #Javascript

js的with语句使用方法

Sep 21 #Javascript

从阿里妈妈发现的几个不错的表单验证函数

Sep 21 #Javascript