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中的稀疏数组与密集数组[译]
Sep 17 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
详解Node.js串行化流程控制
May 04 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
深入掌握include_once与require_once的区别
2013/06/17 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
小程序实现搜索框
2020/06/19 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
一看就懂得Python的math模块
2018/10/21 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python wordcloud库安装方法总结
2020/12/31 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
《毛主席在花山》教学反思
2014/04/20 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
争先创优公开承诺书
2014/08/30 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis