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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 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
You might like
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
详解python如何引用包package
2020/06/07 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
物业保安员岗位职责
2014/03/14 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
银行自荐信怎么写
2015/03/05 职场文书
无故旷工检讨书
2015/08/15 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
部分武汉产收音机展览
2022/04/07 无线电