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

贾国强2012

贾国强2012

2016-02-19 09:09

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享javascript入门·图片对象(无刷新变换图片)\滚动图像教程,希望对大家能有一点小小的帮助。
代码如下:

%@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="/uploads/allimg/2016/0119/21091451b-0.jpg"
    img2=new Image(300,400)
    img2.src="/uploads/allimg/2016/0119/210914BB-1.jpg"
    img3=new Image(300,400)
    img3.src="/uploads/allimg/2016/0119/2109143232-2.jpg"
    img4=new Image(300,400)
    img4.src="/uploads/allimg/2016/0119/2109143G0-3.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; ia.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&&id.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&id.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')"

pstrong演示一:无刷新变换图片(有点歪)/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
pstrong演示二:鼠标触发图片变换(书面名称好像叫图像滚动)/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
        tda 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
      pa 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

展开更多 50%)
分享

猜你喜欢

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

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

JavaScript 入门·JavaScript 具有全范围的运算符

Web开发
JavaScript 入门·JavaScript 具有全范围的运算符

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

图像在图片框中的滚动

编程语言 网络编程
图像在图片框中的滚动

ajax无刷新上传图片实例

Web开发
ajax无刷新上传图片实例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

php ajax无刷新上传图片实例代码

Web开发
php ajax无刷新上传图片实例代码

PS怎么替换图片颜色

PhotoShop PS PS教程
PS怎么替换图片颜色

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Android 图片缩放与旋转的实现详解

Android 图片缩放与旋转的实现详解

解析android创建快捷方式会启动两个应用的问题

解析android创建快捷方式会启动两个应用的问题
下拉加载更多内容 ↓