//主窗体

//与open的区别：1、参数二是传递的参数 2、属性设置格式：属性=属性值; 3、dialogHeight与dialogWidth没有单位，即需要自己加上px

//window.showModalDialog

//("modalDialog.html",window,"dialogHeight=300px;dialogWidth=300px;scroll=yes;status=yes;dialogTop=100;dialogLeft=100;resizable=1");

<script language="javascript" type="text/javascript">
 //图片的描述
 var names=[["猫","这是只好猫"],["篮球运动员","非常强"],["登录","欢迎"],["书","好好读书"]];
 //图片地址
 var imgs=["img//cat1.gif","img\\xiaoniu.jpg","img//login.jpg","img//书END.jpg"];
 //索引
 var index=1;
 //图片自动切换
 function changeImg(){
  if(index==4){
   index=0;
  } 
  document.getElementById("img").src=imgs[index];
  index++;
 }
 //点击span切换图片
 function clickSpan(){
  var spans=document.getElementsByTagName("span"); 
  for(var i=0;i<spans.length;i++){

//为每个span标签添加一个点击事件
   spans[i].onclick=function(){
     index=this.innerHTML-1;
     document.getElementById("img").src=imgs[index];
   };
  }
 }
 
 window.onload=clickSpan;
 window.setInterval("changeImg()",1000);
</script>

<body>

<p align="center">图片动态切换效果</p>

<img src="img/cat1.gif" id="img" width="160" height="160" onclick="javascript:window.showModalDialog('hw1_Hw2_1.html',window)"/><br />

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

</body>

//打开的窗体

<script language="javascript" type="text/javascript">
     function show(){
   //获取打开这个窗体的窗体对象
   var win= window.dialogArguments;
   //获取窗体对象中的names数组的元素
   var name=win.names[win.index-1];
   //获取窗体对象的url数组的元素
   //第一种方法
   //var url=win.imgs[win.index-1];
   //第二种方法
   //var url=win.document.getElementById("img").src;
   document.writeln("<img src='"+url+"' width='260' height='300' align='left'/>");
   document.write("名称："+name[0]+"<br>");
   document.write("描述："+name[1]+"<br>");

　//window.dialogArguments获取打开本模式窗体的窗体
  //window.dialogArguments.location.href="打开窗体以及父窗体刷新.html";//刷新
  //window.close();//关闭
  }
  window.onload=show;
    </script>

modalDialog的使用,图片切换，点击图片时打开一个窗体，并显示信息的更多相关文章

  1. 小程序wx.previewImage查看图片再次点击返回时重新加载页面问题

    wx.previewImage预览图片这个过程到底发生了什么? 首先我们点击图片预览,附上查看图片代码: <image class="headImg" data-src=&q ...

  2. 点击input时,里面默认字体消失显示

    点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...

  3. layui数据表格,当数据过长出现三个...的时候,点击会弹出一个框全部显示,如何去掉这个框

    最笨的方法就是通过css把那个框隐藏掉 .layui-table-tips-main{display:none} .layui-table-tips-c{display:none}

  4. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  5. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  6. 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  7. Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  8. Inno Setup设置在安装Finished页面，点击finish后打开网页

    在安装的最后一个页面FinishPage中点击Finished然后打开一个网页 这个功能貌似很简单,不就是在点击finish按钮给它绑定事件,问题立马解决. 在普通的桌面应用程序开发中的确是这样做的, ...

  9. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

随机推荐

  1. Js 正则表达式 写了一个正整数或小数点或分数前两个正则表达式

    写了一个正整数或小数点或分数前两个正则表达式 /^[0-9]+([.]{1}[0-9]{1,2})? $/ 版权声明:本文博客原创文章.博客,未经同意,不得转载.

  2. 专业的GIS(电子地图、地理信息系统)在房地产行业的初步应用？

    时下随着智能手机在我国的迅猛发展以及网络时代的快速前进.手机APP以及web应用站点也顺势发展的如火如荼.我们国家还是一个人口大国,在吃穿不愁的今天,一个人口大国必需要面对的严峻问题就是住房问题.即使 ...

  3. Xcode-5.1.1更改文件盯作者

    原来的文件默认是用户开机时的username ,网上说什么改通讯录事实上都是不正确的. 1.首先打开偏好设置,选择用户群组 2.进入用户界面 改动全名.此时要求你输入用户的password才干改动us ...

  4. javascript 的Date 格式化, 模仿shell中date命令的格式

    原文:javascript 的Date 格式化, 模仿shell中date命令的格式 shell 中显示当前的日期 [root@localhost]$ date '+%Y-%m-%d %H:%M:%S ...

  5. Hadoop之——CentOS构造ssh否password登录注意事项

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46388809 前提配置:使用root登录改动配置文件:/etc/ssh/sshd_ ...

  6. 大数据系列修炼-Scala课程06

    关于Scala中的正则表达式与模式匹配结合的正则表达式Reg 正则表达式的实现:正则表达式的定义与其它语言差不多,只需在表达式后加一个.r,并且可以遍历相应的表达式进行匹配 //定义的正则表达式 va ...

  7. 都能看懂的嵌入式linux/android alsa_aplay alsa_amixer命令行使用方法

    前几天在嵌入式linux上用到alsa command,网上查的资料多不给力,仅仅有动手一点点查,最终能够用了,将这个用法告诉大家,以免大家少走弯路. 0.先查看系统支持哪几个alsa cmd: ll ...

  8. POJ 3233 Matrix Power Series(矩阵高速功率+二分法)

    职务地址:POJ 3233 题目大意:给定矩阵A,求A + A^2 + A^3 + - + A^k的结果(两个矩阵相加就是相应位置分别相加).输出的数据mod m. k<=10^9.     这 ...

  9. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  10. update与fixedupdate差别

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网--Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=307 今天有人问我问什么我在处 ...