modalDialog的使用,图片切换，点击图片时打开一个窗体，并显示信息
//主窗体
//与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的使用,图片切换，点击图片时打开一个窗体，并显示信息的更多相关文章
- 小程序wx.previewImage查看图片再次点击返回时重新加载页面问题
wx.previewImage预览图片这个过程到底发生了什么? 首先我们点击图片预览,附上查看图片代码: <image class="headImg" data-src=&q ...
- 点击input时,里面默认字体消失显示
点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...
- layui数据表格,当数据过长出现三个...的时候,点击会弹出一个框全部显示,如何去掉这个框
最笨的方法就是通过css把那个框隐藏掉 .layui-table-tips-main{display:none} .layui-table-tips-c{display:none}
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
- Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
- Inno Setup设置在安装Finished页面，点击finish后打开网页
在安装的最后一个页面FinishPage中点击Finished然后打开一个网页 这个功能貌似很简单,不就是在点击finish按钮给它绑定事件,问题立马解决. 在普通的桌面应用程序开发中的确是这样做的, ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
随机推荐
- 我的2011年总结--大明zeroson程序猿一周年总结
花絮:看到csdn举办"我的2011"年度征文活动,我恰好工作也一年多了,上个月写了篇博客,主要是我换工作方面的流水账,这篇我从主观.客观.多方位地谈谈我这一年的变化. ...
- oracle PL/SQL（procedure language/SQL）程序设计之函数+过程+包（转）
匿名PL/SQL块回顾 DECLARE (可选) 定义在PL/SQL块中要使用的对象 BEGIN (必须) 执行语句 EXCEPTION (可选) 错误处理语句 END; (必 ...
- Xcode5和6共处，如何发布应用程序存储
怎样你和我一样手贱安装了Xcode6,同一时候又须要公布应用到商店时,你会发现打好的包是通只是审核的. 验证报错: unable to validate application archives of ...
- Windows 8 – Reason 442: Failed to enable Virtual Adapter
Cisco VPN on Windows 8.1 – Reason 442: Failed to enable Virtual Adapter https://supertekboy.com/2013 ...
- MVC 快速开发框架
ASP.NET MVC 快速开发框架之 SqlSugar+SyntacticSugar+JQWidgetsSugar+jqwidgets jqwidgets.js: 是一个功能完整的框架,它具有专业的 ...
- Linux了解进程的地址空间
供Linux了解虚拟内存,非常好的引导了.原文链接:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=26683523&i ...
- thinkphp学习笔记9—自动加载
原文:thinkphp学习笔记9-自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\ ...
- NSOJ 飞船汇合(经典)
一支分散的飞船舰队,需要汇合到主舰,但是这种飞船在太空中飞行的耗油与质量没有关系,只与发动机打开的时间有关系,为了节省油量,指挥官通知,汇合途中,多台飞船可以串成串飞行,这样只需启动一台发动机,由于安 ...
- linux下一个eclipse组态jdk
今天ubuntu12.04安装eclipse,安装该想法eclipse后.还需要配置jdk.但没想到eclipse我有自己主动做好(但最主要的原因是我的linux在刚刚安装了一个jdk,假设有两个或更 ...
- 采用oracle官方文件（11G）——初步Concept
采用oracle官方文件(11G)示例 这里是oracle官方文档界面,想了解oracle,阅读官方文档是唯一的方法,大致了解官方文档的使用,对官方文档有一个更直观的认识.文档可通过文章关联的链接查看 ...