首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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入门·图片对象(无刷新变换图片)\滚动图像

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

Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
跨浏览器开发经验总结（四） 怎么写入剪贴板
May 13 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
VUE预渲染及遇到的坑
Sep 03 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
详解Node.js使用token进行认证的简单示例
May 25 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
css3 (2) Qlabel(1) MybatisPlus(2) JSON(10) capture(1) uniapp(4) SpringBoot(22) tabBar(1) Normal From(1) self(1)
You might like
php session 预定义数组
2009/03/16 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
webuploader分片上传的实现代码（前后端分离）
2018/09/10 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
香港化妆品经销商：我的公主
2016/08/05 全球购物
阿迪达斯俄罗斯官方商城：adidas俄罗斯
2017/03/08 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
抄作业检讨书
2014/02/17 职场文书
节电标语大全
2014/06/23 职场文书
病假条格式范文
2015/08/17 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android